标签: keyframe

我一直在尝试使用ffmpeg 0.11.1从视频中提取关键帧.到目前为止,我尝试过的所有命令都不提取关键帧,而是返回所有帧,即25fps*输出中的总帧时间数.我尝试将keyint_min设置为25,以确保每秒有一个关键帧的最大值.

ffmpeg -vf select="eq(pict_type\,PICT_TYPE_I)" -g 250 -keyint_min 25 -i C:\test.mp4 -vsync 2 -f image2 C:\testTemp\thumbnails-%02d.jpeg

但仍然返回所有帧.

然后我尝试将关键帧分开20秒.

ffmpeg -i C:\test.mp4 -vf select='eq(pict_type\,I)*(isnan(prev_selected_t)+gte(t-prev_selected_t\,20))' -vsync 0 -f image2 C:\testTemp\%09d.jpg

同样的结果,返回所有帧.

我该怎么办？

在JavaScript中,很容易获得应用于元素的CSS动画的名称和属性:

var animName = element.style.webkitAnimationName;
// element.style.mozAnimationName
// etc...

但有没有办法读出甚至更改动画的CSS关键帧？

我试图在页面的中心设置一个div来制作动画而不会四处移动.div应该在旋转(无限)时向上和向下缩放,同时它位于页面中心的一个位置.它在Firefox和Chrome中做得很好,但在IE11中,div从页面顶部开始,然后动画到需要的位置.动画完成后,div会跳回到顶部并重新开始.

这是演示这个的JSFiddle.请在Chrome和IE中查看,以查看对比度.

这是代码:

@keyframes logosplash {
      0% {transform: translateY(50vh) scale(1.25) rotateZ(-45deg);}
     50% {transform: translateY(50vh) scale(1) rotateZ(135deg);}
    100% {transform: translateY(50vh) scale(1.25) rotateZ(315deg);}
}
.logoSplash {
    animation: logosplash 1.5s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96);
    -webkit-animation: logosplash 1.5s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.logo {
    position: fixed;
    width: 13.5vw;
    height: 13.5vw;
    left: 50%;
    margin-top: calc(-6.75vw - 5px);
    margin-left: calc(-6.75vw - 5px);
    box-shadow: 0px 0px 10px #000, inset 0px 0px 5px #000;
    border-radius: 25px;
    border: 5px solid #fff;
    transform: translateY(50vh) scale(0.6) …

所以我制作了一个带有关键帧的 CSS 动画，其中元素的背景颜色和字体颜色发生变化。问题是，当到达最后一帧时，颜色会重置为默认颜色。我使用了它animation-fill-mode，它有助于保持最终尺寸，但颜色仍然重置？这是代码：

@keyframes anim{
  0% {background-color: #404880; color: #DCE0F7;}
  90% {background-color: #747AA6; color: #242D5E;}
  100% {font-size: 19px;}
}
.apply{
  font-size: 15px;
  background-color: #404880;
  border-radius: 5px;
  border-style: none;
  color: #DCE0F7;
}
.apply:hover{
  animation: anim;
  animation-duration: .5s;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation-fill-mode:forwards; /*IE 10+*/
  animation-fill-mode:forwards; /*when the spec is finished*/
}

在左边的例子中，路径是连续的（即没有m命令），因此路径的段被一个接一个地绘制。

在右侧示例中，路径是不连续的（即包含m命令），这会导致一次绘制所有段。

如何使正确示例中的线段一个接一个地绘制？

也就是说，只有在最上面的笔画完成时才开始第二笔画，而不是同时开始。

<svg width="220px" height="100px" viewBox="-10 -10 240 120">
<style>
path{stroke-dasharray:500;stroke-dashoffset:500;fill:none;stroke:#000;stroke-width:6px;animation:draw 5s linear infinite;}
@keyframes draw{to{stroke-dashoffset:0;}}
</style>
  <path d="m0,0 h60 v60 h-60 z" />
  <path d="m120,0 h60 m-60,20 h60 m-60,20 h60 m-60,20 h60 m-60,20" />
</svg>

我正在尝试按照此链接并使用命令将视频的关键帧间隔更改为 1

ffmpeg -i myvideo.mp4 -vcodec libx264 -x264-params keyint=30:no-scenecut -acodec copy out.mp4

如第一个答案所示。我写的是keyint=30我的视频，所以。然而，只有第一帧的关键帧是，其余的都保留（如上面命令之前），如命令所示：fps301*30=3010ffprobe -select_streams v:0 -show_frames out.mp4

...
[FRAME]
media_type=video
stream_index=0
key_frame=1
pkt_pts=0
pkt_pts_time=0.000000
pkt_dts=0
pkt_dts_time=0.000000
best_effort_timestamp=0
best_effort_timestamp_time=0.000000
pkt_duration=512
pkt_duration_time=0.033333
pkt_pos=48
pkt_size=18693
width=560
height=320
pix_fmt=yuv420p
sample_aspect_ratio=N/A
pict_type=I
coded_picture_number=0
display_picture_number=0
interlaced_frame=0
top_field_first=0
repeat_pict=0
[/FRAME]
[FRAME]
media_type=video
stream_index=0
key_frame=0
pkt_pts=512
pkt_pts_time=0.033333
pkt_dts=512
pkt_dts_time=0.033333
best_effort_timestamp=512
best_effort_timestamp_time=0.033333
pkt_duration=512
pkt_duration_time=0.033333
pkt_pos=21764
pkt_size=199
width=560
height=320
pix_fmt=yuv420p
sample_aspect_ratio=N/A
pict_type=B
coded_picture_number=3
display_picture_number=0
interlaced_frame=0
top_field_first=0
repeat_pict=0
[/FRAME]
... …

我有两个图像在DOM元素周围移动.但是它们的旋转是错误的,并且运动不顺畅.

我的小提琴

#mainPage {
  width: 400px;
  height: 165px;
  margin: 10% auto;
}

#mainPage>p {
  text-align: center;
}

.bicycle {
  width: 48px;
  height: 30px;
  background: red;
}

#bicycleOriginal {
  animation: moveBicycleOriginal 20s infinite;
}

#bicycleFlipped {
  animation: moveBicycleFlipped 20s infinite;
}

#mainTxt {
  letter-spacing: 7px;
  font-size: 30px;
  margin-bottom: 30px;
}

@keyframes moveBicycleOriginal {
  from {
    transform: translate(0, 0);
  }
  1% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(350px, 0);
  }
  26% {
    transform: translate(350px, 0) rotate(90deg);
  }
  50% { …

每次单击该框时，我都想创建一个关键帧动画。但是当我点击框时，动画只工作一次。我希望每次单击框时动画都能正常工作。

有什么帮助吗？谢谢！

    $(document).ready(function(){
        $("#rocketstart").click(function(){
            $(".rocket").css("animation-play-state", "running");
        });

    });
     

.rocket {
   background-color: red;
    width: 550px;
    height: 300px;
    cursor: pointer;
    background-repeat: no-repeat;
    margin-right: -340px;
    margin-bottom: -110px;
    animation-name: rocket;
    animation-duration: 1s;
    animation-play-state: paused;
}

@keyframes rocket {
   0%   {  transform:translate(0)    }
   100%  {  transform:translate(0, -50%) }
       70%  {  opacity:1; }
       100%  {  opacity:0; }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='rocket' id="rocketstart" title="rocketup">

我有一个像下面这样的动画：

@keyframes pulseColorGreen {
    0% {
        background-color: green;
    }
    97%{
        background-color: green;
    }
    100% {
      background-color: white;
    }
  }

我的网站也有一个黑暗模式，背景变成黑色。现在在动画中，我想显示深绿色，如下所示：

@keyframes pulseColorGreen {
    0% {
        background-color: darkgreen;
    }
    97%{
        background-color: darkgreen;
    }
    100% {
      background-color: black;
    }
  }

对于暗模式，我在 body 标签中添加了一个类“lightsOff”。我正在使用目标元素类和“lightsOff”类的组合来管理所有其他颜色变化，就像：

.lightsOff .someclass{
    color: white
}

但是当在 css 文件中定义一个元素时：

@keyframes .lightsOff pulseColorGreen {
    0% {
        background-color: darkgreen;
    }
    97%{
        background-color: darkgreen;
    }
    100% {
      background-color: black;
    }
  }

它给我错误说“预期的标识符”。我正在从 javascript 动态地向元素添加动画名称属性。因此，我不喜欢更改 JS 代码来识别当前设置的主题并相应地设置关键帧。我怎样才能做到这一点？

如何使用 popmotion pure 使最后一个关键帧将我的矩形旋转到 35 度角？

https://codepen.io/matthewharwood/pen/XWmRPaK?editors=1111

HTML：

<div class="flex h-screen w-screen justify-center items-center">
  <div class="portal-b">
    <h1 class="left"></h1>
  </div>
</div>
<button class="trigger fixed z-10 left-0 top-0">
  B replace A
</button>

CSS：

.portal-b {
  background: blue;
  width: 1px;
  height: 100px;
}

JS

const { easing, keyframes, styler } = window.popmotion;
const trigger = document.querySelector('.trigger');
const [_, portalB] = [document.querySelector('.portal-a'), document.querySelector('.portal-b')];
trigger.addEventListener('click', () => {
  const portalS = styler(portalB);
  keyframes({
  values: [
    { translateX: 0, scaleX: 0, rotateZ: 0, transformOrigin: 'left center' …