css3动画有几种类型

CSS3动画是一种让网页元素产生动态效果的技术。它使用CSS属性来控制动画的过程和效果。CSS3动画有几种类型，下面我们来逐一介绍。

1. 关键帧动画

/* 定义关键帧 */
@keyframes my-animation { 
  0% { width: 100px; }
  50% { width: 200px; }
  100% { width: 300px; }
}

/* 使用关键帧 */
div {
  animation: my-animation 2s ease infinite;
}

关键帧动画通过定义不同的时间节点（或关键帧）来描述动画的变化过程。通过给元素添加 animation 属性，可以让元素执行该动画。

2. 过渡动画

/* 定义过渡 */
div {
  transition: width 2s ease;
}

/* 触发过渡 */
div:hover {
  width: 300px;
}

过渡动画是指在元素属性从一种状态过渡到另一种状态时，增加过渡效果，使变化过程更加平滑。过渡动画通过添加 transition 属性来实现。

3. 变换动画

/* 定义变换 */
div {
  transform: rotate(45deg);
}

变换动画是指通过对元素进行旋转、平移、缩放等变换，来产生动画效果。它是通过添加 transform 属性来实现的。

4. 动画序列

/* 动画序列 */
div {
  animation: anim1 2s ease forwards,anim2 2s ease forwards;
}

动画序列是指让多个动画顺序进行的效果。为了使不同动画的效果互不影响，需要使用不同的 animation 属性，并添加 "forwards" 参数。

以上就是CSS3动画的几种类型，其中关键帧动画、过渡动画、变换动画都可以单独使用，也可以组合使用，而动画序列则需要结合多个动画一起使用。