[分享]css3怎么让动画自己动

CSS3是一种用于设计和开发网站的样式表语言。它有许多强大的功能，其中之一是CSS3动画。CSS3动画可以使网站更生动有趣，但是让动画自己动，是一项需要注意的技巧。 使用CSS3动画可以使用keyfr...

CSS3是一种用于设计和开发网站的样式表语言。它有许多强大的功能，其中之一是CSS3动画。CSS3动画可以使网站更生动有趣，但是让动画自己动，是一项需要注意的技巧。

使用CSS3动画可以使用@keyframes规则和animation属性来实现。

@keyframes myanimation {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(0);
  }
}

.element {
  animation: myanimation 5s ease-in-out infinite;
} 

在上面的示例中，我们定义了一个名为“myanimation”的关键帧，用于定义动画的不同阶段。这个关键帧将元素从初始状态向右移动50%，再回到初始状态。

然后我们将动画应用到一个元素上，使用animation属性。具体来说，我们将使用myanimation规则，持续时间为5秒，具有ease-in-out的时间函数，无限循环。

但是，当网页加载时，动画不会自动启动。我们需要使用JavaScript来实现这一点：

const element = document.querySelector('.element');
element.classList.add('animate');

// 监听动画结束
element.addEventListener('animationend', function() {
  // 移除动画类
  element.classList.remove('animate');
  // 重新开始动画
  void element.offsetWidth; // 强制重新计算元素布局
  element.classList.add('animate');
}); 

在JavaScript中，我们首先使用document.querySelector（）来获取元素。然后我们添加一个名为“animate”的类，用于将动画应用到元素上。

我们还监听animationend事件，在动画完成后将“animate”类删除，然后重新启动动画。

最后，我们使用void element.offsetWidth强制重新计算元素的布局。这是必要的，因为如果我们不这样做，浏览器将不会重新计算元素的位置，而是从缓存中恢复它，导致动画没有启动。

通过这些技巧，我们可以让CSS3动画自己动起来，并创建更生动有趣的网站。