我试图让这个动画停留在悬停的最后一个关键帧,但它一直恢复到开头.我不介意我是否将其悬停在原来的位置,而不是在悬停期间.我查看了很多堆栈问题,每个人都说要使用动画填充模式：前锋,但这似乎不起作用.
- .circle:hover .spin {
- -webkit-animation-name: drop;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-direction: alternate;
- -webkit-animation-timing-function: ease-out;
- -webkit-animation-delay: 0;
- -webkit-animation-fill-mode: forwards;
- }
- @-webkit-keyframes drop {
- 100% {
- -webkit-transform: rotate(90deg);
- }
- }
解决方法
对于那些遇到类似问题的人,首先要确保使用动画填充模式：转发.见
this related question.
在这种特定情况下,以下内容是相关的：
07001
A transformable element is an element whose layout is governed by the CSS Box model which is either a block-level or 07002,or whose display property computes to table-row,table-row-group,table-header-group,table-footer-group,table-cell,or table-caption.
由于.circle元素是一个span,因此默认情况下它是内联的,因此属性transform：rotate()在动画结束后不会对它产生影响.将其显示更改为内联块或块将解决该问题.
您还应该使用animation shorthand.此外,添加其他供应商前缀：
- .circle:hover .spin {
- display:inline-block;
- -webkit-animation: drop 1s 1 alternate ease-out forwards;
- -moz-animation: drop 1s 1 alternate ease-out forwards;
- animation: drop 1s 1 alternate ease-out forwards;
- }
