CSS 动画学习笔记

什么是CSS动画？

CSS动画是一种用于实现网页元素动态效果的技术，可以通过CSS代码来控制网页元素的动态变化。相比于使用JavaScript等脚本实现动画效果，CSS动画更加高效、简洁，并且不需要编写复杂的逻辑代码。

如何创建CSS动画？

在CSS中，可以通过@keyframes关键字来创建动画效果。下面是一个简单的例子：

cssCopy Code
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

在这个例子中，我们定义了一个DIV元素，并设置了它的初始样式和动画效果。animation-name属性指定了动画的名称，而animation-duration属性则指定了动画的持续时间。

接着，我们通过@keyframes关键字定义了一个名为example的动画，在该动画中，我们将DIV元素的背景颜色从红色渐变到黄色。

CSS动画的常用属性

在创建CSS动画时，还有一些常用的属性可以用于控制动画的表现效果，例如：

• animation-delay：动画延迟开始的时间。
• animation-iteration-count：动画循环的次数。
• animation-direction：动画播放的方向，可以为正向、反向或交替播放。
• animation-timing-function：动画过渡的时间函数，可以为线性、贝塞尔曲线等。

CSS动画的实例

下面是一个实例，将DIV元素旋转360度：

cssCopy Code
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

在这个例子中，我们定义了一个名为rotate的动画，该动画将DIV元素从初始状态旋转到360度的位置，然后无限循环播放。

总结

CSS动画可以为网页元素带来生动、绚丽的效果，让网页更加吸引人眼球。在编写CSS动画时，需要灵活使用常用的属性并注意控制动画的时序和效果，以达到更好的视觉效果。