标签: keyframe

我正在尝试使用CSS动画在我的一个小项目上运行"倾斜"动画.不幸的是我无法从MS演示中移植它 - 无疑所有代码都在那里:http://m.microsoft.com/windowsphone/en-us/demo/default.aspx#home

我正在尝试让页面在加载页面时淡入淡出,只是那部分.一次绝对没问题.我知道我需要定义供应商关键帧,但我的尝试非常糟糕,以至于我没有在jsFiddle的示例中粘贴它们:

http://jsfiddle.net/qCQQD/2/

谁在那里谁会帮助我？这将超出真棒!

编辑1:

a)我仍在尝试在加载页面时运行rotateRight动画.我可能在.tile类中使用了带有leftRotate的hacky版本,并在页面加载中删除了(并添加了rightRotate).

b)这个

.tile:active {
    -webkit-transform: scale(0.97);
    -moz-transform: scale(0.97);
    -o-transform: scale(0.97);
    -ms-transform: scale(0.97);
    transform: scale(0.97);
}

由于添加了代码,Chrome中的速度非常慢,我怎样才能恢复正常？

我怀疑#tile需要某种时间框架

-webkit-transition: 300ms 160ms;

它现在看起来像一个慢动作.我将尝试添加类似-webkit-transition的东西:50ms.(是的,我知道,总菜鸟).

如果我有一个CSS动画,我想创建该动画的各种实例,但从动画的不同阶段开始,我该如何指定.

我想象这样的东西,第二个webkit行是伪代码:

 #cell1
  {
      width:100px;
      height:100px;

       -webkit-animation: pulse 35s infinite alternate;
       -webkit-animation: pulse start at 25%;
  }

我有这个代码：

.blur {
  -webkit-animation: blur 5s ;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes blur {
  0% { -webkit-filter: blur(0px); }
  0% { -webkit-filter: blur(1px); }
  50% { -webkit-filter: blur(5px); }
  60% { -webkit-filter: blur(5px); }
  100% {
    opacity: 0;
  }
}

<img src="http://placehold.it/350x150" class="blur" />

基本上我有一个图像，我想要的效果是慢慢淡入，模糊然后淡出。但是当它模糊时，我希望它在那里停留几秒钟，然后淡出图片。你能帮我一下吗？谢谢

我是关键帧动画的新手,经过一些搜索,这篇文章似乎是一个很好的起点.

这是codepen中的文章代码 - http://codepen.io/anon/pen/yYPxJM

@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  @-moz-keyframes $animation-name {
    @content;
  }  
  @-ms-keyframes $animation-name {
    @content;
  }
  @-o-keyframes $animation-name {
    @content;
  }  
  @keyframes $animation-name {
    @content;
  }
}

@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};      
}

@include keyframes(slide-down) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}

.element {
  width: 100px;
  height: 100px;
  background: black;
  @include animation('slide-down 5s 3');
}

但是,它不能"按原样"工作,我不知道如何继续.

当我向下滚动页面时,我将成为动画对象.例如,将一些动画设置为淡入,其他设置为缩放(调用动作)以使其弹出.jQuery应该不是问题,正是这些动画导致了我的问题.

愿意帮助理解我做错了什么.

提前致谢!

我有一个CSS关键帧动画，它本身非常普通。但是，我希望能够强制动画处于特定帧。 类似的东西anim.setProgress(0.13)，它将动画设置为13％。 我怎样才能做到这一点？

请注意，我不只是想在任意点开始动画。我希望能够中断它并说“回到32％”之类的值，而不管动画沿多远。

在网页中,有没有办法做一个目标对象上的CSS3动画微光,就像一个DIV,A标签,或者BUTTON,使用关键帧？我更关注当前的浏览器,而不是IE11版本之前的浏览器.

一个闪光动画将一个闪亮的条形物放置在一个角度,穿过物体并沿特定方向移动.它有助于引起对页面上某些内容的注意.这非常适合在线广告中的目标网页,以吸引客户点击购买.

在这种情况下,HTML目标对象将像页面加载时一样显示.但是,几秒钟之后,它会从您希望应用此效果的元素的可见溢出边界外的隐藏空间中向左移动,并向右移动直到它溢出HTML目标对象边界并离开边界,只是有延迟并再次出现.它可以位于目标对象的顶部,尽管我正在寻找的动画类型位于目标对象的背景中并且闪耀着明亮的白色.在目标物体背景上旅行时,它应该是快速的,使其持续1秒或1.5秒.

作为一名学生,我实际上正在制作自己的作品集.对于标题,我尝试创建天空效果,图像水平滚动.我使用CSS和关键帧,我的问题是当图像结束时,它"重置"并且不会继续平滑滚动.有没有办法让它"无限期地"继续下去？(我把持续时间改为5s只是为了不让你等到40s:p)

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}
#header-top {
  height: 190px;
  background-image: url('http://image.noelshack.com/fichiers/2016/46/1479595480-clouds.png');
  background-repeat: repeat-x;
  animation: animatedBackground 5s linear infinite;
  line-height: 400px;

}

    <div id="header-top">
    </div>

我从这个Rainbow Text Animation Rainbow-Text-animation中得到了启发，我想仅使用CSS来实现这一目标，而不是使用所有复杂的SCSS编码。

到目前为止，我已经得到了我喜欢的东西，现在我只想使其从左到右移动，并且在一整行中具有多种颜色，而不是一次仅具有一种颜色。

运行代码片段以查看我在说什么。

如您所见，我希望一行中有尽可能多的颜色，而不是整行中有一种颜色（一次仅一种）。

#shadowBox {
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.2);
  /* Black w/opacity/see-through */
  border: 3px solid;
}

.rainbow {
  text-align: center;
  text-decoration: underline;
  font-size: 32px;
  font-family: monospace;
  letter-spacing: 5px;
  animation: colorRotate 6s linear 0s infinite;
}

@keyframes colorRotate {
  from {
    color: #6666ff;
  }
  10% {
    color: #0099ff;
  }
  50% {
    color: #00ff00;
  }
  75% {
    color: #ff3399;
  }
  100% {
    color: #6666ff; …

我有一个关于ffmpeg用法的问题.每次当我尝试将视频文件转换为某种不同的格式时,输出文件都会获得静态的关键帧序列.

我的意思是关键帧出现在12帧的距离.我知道它的控制器参数-g可以更改为任何其他数字.

ffmpeg -i 1.avi -vcodec mpeg4 -b 2000000  out.avi

我认为应该有一些方法可以使关键帧出现在不均匀的间隔上.这些间隔应该由编解码器计算,并且应该基于视频文件中的图像变化.因此,关键帧应仅在需要时插入,但在N帧后不一致.

有人可以向我解释一下这个"智能"编码是如何用ffmpeg完成的吗？谢谢

解决方案:好的,我一直在寻找的解决方案非常简单.如果将-g设置为零,ffmpeg将根据视频镜头和比特率选择关键帧

我正在尝试制作一个小的关键帧动画。

当用户将鼠标悬停在按钮上时，我希望背景图像稍微向右移动，然后再次向后移动。如此一点“反弹”运动。

在我的第一个示例中，我在CSS中使用了一个简单的悬停，将背景位置从91％更改为93％，这将导致在悬停时移动。

但是，当我尝试执行类似操作时，要使用名为的关键帧动画nextarrow，该动画将无法运行。

这是一个JSFiddle，显示了我的工作示例（button-one）和非工作示例（button-two）

我哪里出问题了？

http://jsfiddle.net/franhaselden/Lfmegdn5/

.button-two.next:hover{
   -webkit-animation: nextarrow 1s infinite;
   -moz-animation: nextarrow 1s infinite;
   -o-animation: nextarrow 1s infinite;
   animation: nextarrow 1s infinite;
}

@keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}