[分享]css3抖动一下然后停止

CSS3 抖动一下然后停止是一种常见的动画效果，可以让网页看起来更加生动有趣。下面让我们来学习一下如何实现这种效果。/ 首先定义一个抖动的关键帧动画 / keyframes shake { 0 { t...

CSS3 抖动一下然后停止是一种常见的动画效果，可以让网页看起来更加生动有趣。下面让我们来学习一下如何实现这种效果。

/* 首先定义一个抖动的关键帧动画 */
@keyframes shake {
  0% {
    transform: translate(0);
  }
  10%, 90% {
    transform: translate(-10px, 0);
  }
  20%, 80% {
    transform: translate(10px, 0);
  }
  30%, 50%, 70% {
    transform: translate(-10px, 0);
  }
  40%, 60% {
    transform: translate(10px, 0);
  }
}

/* 定义一个类名，用于触发抖动效果 */
.shake {
  animation: shake 0.8s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

/* 设置一个点击事件，让元素点击时触发抖动效果 */
document.querySelector('.target').addEventListener('click', function() {
  this.classList.add('shake');
  
  /* 延时 0.8s 后移除 shake 类名，停止抖动 */
  setTimeout(function() {
    document.querySelector('.target').classList.remove('shake');
  }, ***);
}); 

上面的代码中，我们首先定义了一个关键帧动画 `shake`，用于实现抖动效果。接着定义一个类名 `.shake`，当元素被添加该类名时，就会触发抖动效果。

在 JavaScript 中，我们为目标元素添加一个点击事件，当元素被点击时，就会添加 `.shake` 类名，触发抖动效果。同时，我们使用 `setTimeout` 函数，延时 0.8s 后再移除 `.shake` 类名，实现抖动一下然后停止的效果。