css中的文本动画可以应用于图像吗？答案

【问题标题】：Can text animation in css be applied to images ?css中的文本动画可以应用于图像吗？
【发布时间】：2017-06-08 16:11:30
【问题描述】：

我正在尝试将抖动动画转换为图像。它适用于文本，但不适用于图像。在这里需要一些帮助。

.shake:hover {
 animation-name: shake;
 }

  @keyframes shake {
   from, to {
   transform: translate3d(0, 0, 0);
   }

   10%, 30%, 50%, 70%, 90% {
   transform: translate3d(-50px, 0, 0);
   }

   20%, 40%, 60%, 80% {
   transform: translate3d(50px, 0, 0);
     }
    }

【问题讨论】：

你是直接应用到img控件吗？？尝试将其包裹在 div 中，然后摇动 div 而不是 img 控件。

标签： html css animate.css

【解决方案1】：

试试这个。

.shake:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

<div class="shake">
<img src="https://placeholdit.co//i/555x150">
</div>

【讨论】：

【解决方案2】：

它适用于图像。你的问题是你没有定义动画的持续时间。

试试这个：

.shake:hover {
  animation-name: shake;
  animation-duration: 2s;
}

或速记版本：

.shake:hover {
  animation: shake 2s;
}

演示：jsfiddle

【讨论】：