css两种动画的区别

CSS动画已成为网页设计中必不可少的一部分，可以给网页增添美感的同时也能让用户体验更为流畅。在CSS动画中，我们常见到两种不同的动画方式：transition（过渡）和animation（动画）。它们的实现方式各不相同，下面让我们来看看这两种动画方式的具体区别。

/* CSS Transition */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s;
}
div:hover {
  width: 200px;
} 

CSS Transition 过渡动画是指在CSS属性的变化过程中实现平滑的过渡效果。上面这段代码中，鼠标放在div元素上面时，其宽度将从100px变成200px，过程中需要2s的时间。transition属性规定了过渡动画的持续时间、过渡类型以及过渡开始和结束时的状态。在定义过渡属性时，需要将属性名和时间值一起定义。

/* CSS Animation */
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
div {
  width: 100px;
  height: 100px;
  background-color: green;
  animation: rotate 2s linear infinite;
} 

CSS Animation 动画是指在一段时间内按照一定规律变化的样式效果。上面这段代码中，我们定义了一个名为rotate的动画，它从0%开始，旋转0度，在100%时旋转360度，规定了动画开始和结束的状态。我们通过animation属性在div元素上应用这个动画，规定了动画的名称，动画时长，动画速率以及动画播放次数。通过关键帧（keyframes）来定义动画过程中不同时间点的状态效果。

综上所述，transition用来实现从一个状态过渡到另一个状态，场景主要在hover等交互触发场景中使用；animation用来制作更为复杂的动画效果，可以实现旋转、淡入淡出等多种效果，场景主要在网站界面，Banner广告，游戏等多种场景中使用。