如何减慢关键帧动画？

Posted 2023-03-06

【中文标题】如何减慢关键帧动画？

【英文标题】：How do I slow down a keyframe animation?

【发布时间】：2015-09-26 05:09:58

【问题描述】：

我有这个代码：

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

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

【参考方案1】：

考虑关键帧，您想让动画知道何时开始淡入淡出。否则，它假定您在动画期间正在努力实现最终的不透明度。

为防止出现这种情况，请在开始淡入淡出之前将您的 opacity 固定为 1。你可以试试这样的：

.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 持续时间和关键帧百分比来微调此持续时间（较大的百分比分布 = 淡出前的较长时间）。

【讨论】：

@ViratKohli 不客气！如果它对您有所帮助，请接受此答案 - 这将帮助我获得代表，以便我可以在这里帮助更多人。谢谢！ :)