如何放慢关键帧动画的速度？ [英] How do I slow down a keyframe animation?

问题描述

我有以下代码：

.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" />

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

Basically I have an image and the effect that I want is to fade it in slowly, blur it and then fade it out. But when it blurs I want it to stay there for few seconds and then fade out the picture. Could you please help me out? Thanks

推荐答案

关于关键帧，您想让动画知道何时开始淡入淡出。否则，它假定您在动画过程中一直朝着最终的不透明度努力。

Thinking in terms of keyframes, you want to let the animation know when to start fading. Otherwise it assumes you're working towards your final opacity for the duration of the animation.

为防止这种情况，请在开始渐隐之前将不透明度固定为1。您可以尝试执行以下操作：

To prevent this, pin your opacity at 1 just prior to beginning the fade. You could try something like this:

.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); }
  90% { 
    -webkit-filter: blur(5px);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

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

以上代码仅在动画的最后10％开始淡出-否则，模糊的图像会徘徊。您可以同时使用 .blur 持续时间和关键帧百分比（较大的百分比分布=淡出之前需要更长的时间）来微调此持续时间。

The above code only starts the fadeout in the last 10% of the animation - otherwise, the blurred image hangs around. You can nudge this duration with both your .blur duration and your keyframe percentages (larger percentage spread = longer time before fading out).

这篇关于如何放慢关键帧动画的速度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！