【问题标题】: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" />

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

【问题讨论】:

    标签: css animation keyframe


    【解决方案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 不客气!如果它对您有所帮助,请接受此答案 - 这将帮助我获得代表,以便我可以在这里帮助更多人。谢谢! :)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-12-22
    • 2012-08-16
    • 2017-05-30
    • 2021-03-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多