Question

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

.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);
     }
    }

Answer 1

试试这个。

＆＃13;

.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);
  }
}

＆＃13;

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

＆＃13;

Answer 2

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

试试这个：

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

或速记版本：

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

演示：jsfiddle

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

2 个答案: