我有水动画。我想要两个 keyframes
有 cubic-bezier(1,.41,.74,.45)
和第三个有 cubic-bezier(.38, .8,.68,.09)
。换句话说,我需要波浪以相同的方式首先循环 2 次,最后一次以不同的方式表现。总体而言,动画中有 3 个 keyframe
循环。有没有办法为不同的关键帧指定不同的 cubic-bezier
或为相同的元素应用不同的动画?
纯 CSS
。没有额外的元素。
这是 first part of animation 的示例这是给 second part 的.
最佳答案
我不确定你的要求是什么。
但是关于你的问题
Is there a way to specify different cubic-beziers for different keyframes
是的,这是可能的
@keyframes ripple {
0% {
transform: scale(1);
animation-timing-function: cubic-bezier(.38,.8,.68,.09);
}
50% {
transform: scale(0.27);
animation-timing-function: cubic-bezier(1, .41, .74, .45);
}
100% {
transform: scale(1);
}
}
.wave {
width: 100px;
height: 100px;
border: solid 4px red;
border-radius: 50%;
animation: ripple 2s infinite;
}
<div class="wave"></div>
关于CSS:如何将不同的动画应用于相同的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43233581/