好吧,想象一下你创建了具有缓出效果的动画,并设置了2s的持续时间(例如):
animation-name: example;
animation-timing-function: ease-out;
animation-duration: 2s;
动画持续时间属性指定动画完成一个循环所需的秒数,但我无法找到解决方案 如何(例如)仅减速"缓出&# 34;动画的一部分。
这是一个简单动画的小提琴示例,所以你准备好测试你的想法(如果它甚至可能?!):https://jsfiddle.net/3nbr6LhL/
(如果你愿意,可以随意使用js)。 谢谢。
答案 0 :(得分:3)
如何放慢动画的“缓出”部分?
由于ease-out
是bezier-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);
______
如何设置CSS动画定时功能的计时器?
答案取决于设置计时器的含义。如果您想延迟动画,那么您可以使用See working in JSFiddle。例如,要将动画延迟三秒:
animation-delay: 3s;
[Union
]
答案 1 :(得分:1)
您可以使用自定义计时功能代替ease-out
来精确控制动画的速度。