如何为CSS动画定时功能设置定时器?

时间:2015-12-10 12:50:52

标签: javascript css css3 css-animations

好吧,想象一下你创建了具有缓出效果的动画,并设置了2s的持续时间(例如):

animation-name: example;
animation-timing-function: ease-out;
animation-duration: 2s;

动画持续时间属性指定动画完成一个循环所需的秒数,但我无法找到解决方案 如何(例如)仅减速"缓出&# 34;动画的一部分。

这是一个简单动画的小提琴示例,所以你准备好测试你的想法(如果它甚至可能?!):https://jsfiddle.net/3nbr6LhL/

(如果你愿意,可以随意使用js)。 谢谢。

2 个答案:

答案 0 :(得分:3)

如何放慢动画的“缓出”部分?

由于ease-outbezier-curve timing function的内置引用,因此无法减慢动画的缓出部分,cubic-bezier.com定义了1d的行为转换动画的整个持续时间的CSS属性值:

  

<定时功能>

     

CSS数据类型表示一个数学函数,用于描述在转换或动画期间一维值的变化速度。这实质上允许您建立加速度曲线,以便动画的速度可以在其持续时间内变化。这些函数通常称为缓动函数。

您可以使用ease-out curve之类的工具创建自己的贝塞尔曲线,并根据需要修改here is a slower ease-out timing function。例如,See working in JSFiddle

animation-timing-function: cubic-bezier(0, 0, .8, .45);

[animation-delay property]

______

如何设置CSS动画定时功能的计时器?

答案取决于设置计时器的含义。如果您想延迟动画,那么您可以使用See working in JSFiddle。例如,要将动画延迟三秒:

animation-delay: 3s;

[Union]

答案 1 :(得分:1)

您可以使用自定义计时功能代替ease-out来精确控制动画的速度。

看看this CSS EASING ANIMATION TOOL named Ceaser