CSS关键帧动画不使用图像

我只想在鼠标上方的图像上应用两次css动画

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

---

但似乎什么都不管用。请参见您还需要在

@关键帧上添加
-webkit-
和
-moz-
前缀

因此，所有的
@关键帧
将有3个副本，2个带前缀，1个不带前缀

另外，在
动画
速记定义中，而不是
无限
使用希望动画发生的次数，
2

Demo
您应该设置
动画迭代次数：2如果要控制它运行的迭代次数


此外，动画会显式运行无限次：

-webkit动画：同时振动0.1s线性

与以下内容相同：

 {
    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;

缺乏知识。很好的回答：-/
+1
毫无理由的否决是消极思维的镜像。@Manwal我否决了答案，因为演示与您的完全相同，并且没有解决问题。虽然它确实指出了一个打字错误或错误，但它与手头的问题无关。@Manwal说，在解决另一个明显的问题时，这一部分的改变丢失了。演示已更新。@Arbel事实上我只想看几次这个动画，不是无限的，但没有任何线索。@Manwal编辑的版本应该会消除任何混乱。@Arbel我知道。。。这正是问题所在。我已经达到了我想要的完美程度。为@Arbel干杯。