[分享]css3怎么触发动画

CSS3动画的实现方式有很多种，但无论是哪一种，都需要指定一个触发动画的触发条件。下面分别介绍几种触发动画的方式。// 第一种方式：使用:hover伪类 .box { backgroundcolor:...

CSS3动画的实现方式有很多种，但无论是哪一种，都需要指定一个触发动画的触发条件。下面分别介绍几种触发动画的方式。

// 第一种方式：使用:hover伪类
.box {
  background-color: red;
  transition: background-color 1s ease;
}

.box:hover {
  background-color: blue;
}

// 第二种方式：使用JavaScript
.box {
  background-color: red;
  transition: background-color 1s ease;
}

.box.active {
  background-color: blue;
}

<script type="text/javascript">
  var box = document.querySelector('.box');
  box.addEventListener('click', function() {
    box.classList.add('active');
  });
</script>

// 第三种方式：使用@keyframes关键字
.box {
  width: 100px;
  height: 100px;
  position: relative;
  animation: move 1s 1s ease forwards;
}

@keyframes move {
  0% {
    left: 0;
  }
  100% {
    left: 100px;
  }
} 

以上三种方式，分别使用了:hover伪类、JavaScript和@keyframes关键字来触发CSS3动画。具体使用哪种方式，取决于你的具体需求和实现方式。