我有一个元素,它有无限的 css3 动画,在鼠标悬停时会切换到另一个无限动画。一切都好,但有时动画切换过于弹跳,是否有办法在鼠标移入和移出时使动画之间的过渡更加平滑(也许是将元素带回动画之间的初始状态)?两个动画的起始和结束状态相同。
@keyframes first-animation {
0% { transform: scale3d(1,1,0);}
50% { transform: scale3d(0.8,0.8,0); }
100% { transform: scale3d(1,1,0); }
};
@keyframes second-animation {
0% { transform: scale3d(1,1,0); }
70% { transform: scale3d(0.7,0.7,0); }
80% { transform: scale3d(0.9,0.9,0); }
100% { transform: scale3d(1,1,0); }
};
div{
animation: first-animation 1.7s ease-in-out infinite;
}
div:hover, div:focus{
animation: second-animation 1.1s ease-in-out infinite;
}
onAnimationEnd
事件来切换它。 - Zach Saucier'ease-in-out'
,而是尝试使用cubic-bezier()
。可以在 http://cubic-bezier.com/ 上进行调试。 - ghaschel