使用transform:rotate时,悬停时的CSS动画会保留在最后一个关键帧上

前端之家收集整理的这篇文章主要介绍了使用transform:rotate时,悬停时的CSS动画会保留在最后一个关键帧上前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图让这个动画停留在悬停的最后一个关键帧,但它一直恢复到开头.我不介意我是否将其悬停在原来的位置,而不是在悬停期间.我查看了很多堆栈问题,每个人都说要使用动画填充模式:前锋,但这似乎不起作用.

这是我的代码jsfiddle链接

.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.此外,添加其他供应商前缀:

Updated Example Here

.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;
}
原文链接:https://www.f2er.com/css/217480.html

猜你在找的CSS相关文章