要使CSS3动画一直旋转,并在暂停时保持最后的角度,您可以使用animation-play-state: paused;
属性来暂停动画,并使用animation-fill-mode: forwards;
来保留最后的状态。
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotating-element { animation: rotate 2s linear infinite; animation-play-state: running; /* 默认运行动画 */ animation-fill-mode: forwards; /* 在动画结束时保留最后的状态 */ } .rotating-element.paused { animation-play-state: paused; /* 添加一个类来暂停动画 */ }
2、transtion: all 1s ease;
1、ease:(逐渐变慢)
2、linear:(匀速)
3、ease-in:(加速)
4、ease-out:(减速)
5、ease-in-out:(加速然后减速)
/* 菜单旋转样式 */ .snowy-doublerow-layout-menu li .anticon { -webkit-transition: -webkit-transform 0.6s ease-in; } .snowy-doublerow-layout-menu li:hover .anticon { /* -webkit-transform: rotate(720deg); */ animation: rotate 0.3s ease-in; animation-play-state: running; /* 默认运行动画 */ animation-fill-mode: forwards; /* 在动画结束时保留最后的状态 */ }
标签:css3,动画,rotate,ease,transform,旋转,state,animation,暂停 From: https://www.cnblogs.com/Fooo/p/18241690