css动画有哪些特点

CSS动画是指通过利用CSS样式来制作出一些动画效果，可以用于网页设计中的元素交互与装饰。它有以下几个知识点：

1. 关键帧动画
@keyframes是关键帧动画，可用于定义动画的关键帧。通过设置不同的百分比或状态值，来控制元素的动画变化。以下是一个简单关键帧动画的示例：

.test {
  animation-name: move;
  animation-duration: 2s;
  animation-delay: 1s;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(200px);
  }
}

2. 过渡动画

transition可用于控制CSS属性的过渡动画效果，出现改变时会有平滑过渡。以下是一个简单的过渡动画：

.test {
  background-color: red;
  transition: background-color 1s ease-out;
}

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

3. transform变换

transform可用于制作元素的旋转、缩放和平移等变换效果。transform-origin则用于指定变换的中心点。以下是一个简单的变换动画：

.test {
  transform: scale(1) rotate(0deg);
  transition: transform 1s;
}

.test:hover {
  transform: scale(1.5) rotate(45deg);
}

CSS动画可用于网页设计中的元素交互与装饰，通过熟练掌握以上知识点，可以制作出各种炫酷的动效。