Question

我想在鼠标悬停时仅在图像上应用两次css动画

@keyframes vibrate
{
  0%   {transform: rotate(10deg)}
  25%  {transform: rotate(-10deg)}
  50%  {transform: rotate(0)}
  75%  {transform: rotate(10deg)}
  100% {transform: rotate(0)}
}

但似乎没有任何效果。见{{3}}

Answer 1

您需要在-webkit-上添加-moz-和@keyframes前缀。

因此，所有@keyframes将有3个副本，2个带有前缀，1个没有。

同样在animation速记定义中，而不是infinite，使用您希望动画发生的次数2。

演示 https://jsfiddle.net/ju4cuzqL/7/

Answer 2

如果要控制运行的迭代次数，则应设置animation-iteration-count: 2;。

DEMO

此外，您可以无限次地显示动画：

-webkit-animation: vibrate 0.1s linear 0s infinite both;

与以下内容相同：

 {
    animation-name: vibrate;
    animation-duration: 0.1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: both;
}

您的infinite媒体资源应为2：

animation: vibrate 0.1s linear 0s 2 both;
-webkit-animation: vibrate 0.1s linear 0s 2 both;

CSS关键帧动画不使用图像

2 个答案: