css3两个动画效果

CSS3中有很多强大的动画效果，其中两个常用的动画效果是过渡（transition）和关键帧动画（animation）。这两种动画效果都能够通过CSS样式来实现，为网页增添生动的效果和交互性。

我们来讲解一下过渡效果（transition）。过渡效果可以使元素在改变样式时平滑地过渡，而不是突然改变。我们可以通过设置元素的属性来定义过渡效果，比如过渡的持续时间、过渡的属性等。下面是一个示例代码：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s ease-in-out;
}
.box:hover {
  width: 200px;
}

在这个示例中，我们定义了一个名为.box的元素，设置了宽度为100px，并且定义了一个过渡效果，即在1秒的时间内，宽度从100px平滑地过渡到200px。当鼠标悬停在.box元素上时，宽度会发生变化，触发过渡效果。

除了过渡效果，CSS3还提供了关键帧动画（animation）效果。关键帧动画是通过在不同的关键帧上定义元素的样式来实现动画效果。我们可以使用@keyframes规则来定义关键帧，然后将关键帧应用到元素上。下面是一个示例代码：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s infinite;
}
@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}

在这个示例中，我们定义了一个名为.box的元素，设置了宽度为100px，并且定义了一个关键帧动画效果，即在2秒的时间内，元素会水平移动200px，并且无限循环播放。通过@keyframes规则，我们定义了关键帧move，其中0%表示动画开始时的状态，50%表示动画进行到一半时的状态，100%表示动画结束时的状态。在每个关键帧中，我们使用transform属性来改变元素的位置。

除了过渡效果和关键帧动画，CSS3还提供了许多其他的动画效果，比如旋转、缩放、淡入淡出等。通过合理运用这些动画效果，我们可以为网页增添生动的效果和交互性。我们还可以通过使用CSS3的动画效果来替代传统的JavaScript动画，提高网页的性能和用户体验。