Question

我有这段代码：

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

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

Answer 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持续时间和关键帧百分比（较大的百分比差值=较长时间，然后逐渐消失）来缩短此持续时间。

如何减慢关键帧动画的速度？

1 个答案: