我试图让这个动画停留在悬停的最后一个关键帧,但它一直恢复到开头.我不介意我是否将其悬停在原来的位置,而不是在悬停期间.我查看了很多堆栈问题,每个人都说要使用动画填充模式:前锋,但这似乎不起作用.
.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; }