[分享]css3手动动画自动动画

CSS3是一种非常流行的前端技术，它提供了许多有用的功能，其中包括手动动画和自动动画两种方式。手动动画是指通过CSS3的transition和animation属性实现的动画效果，这些属性可以让我们通...

CSS3是一种非常流行的前端技术，它提供了许多有用的功能，其中包括手动动画和自动动画两种方式。

手动动画是指通过CSS3的transition和animation属性实现的动画效果，这些属性可以让我们通过定义动画开始、结束、持续时间、延迟时间、速度曲线等参数来控制动画效果的表现形式。以下是一个简单的例子：

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

.box:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
} 

上面的代码中，当用户鼠标移动到.box元素上时，宽度和高度会从100px变为200px，背景颜色从红色变为蓝色。这种动画是通过transition属性定义的，它会让元素运动的过程中平滑过渡，让动画效果更加流畅。

自动动画是指通过CSS3的@keyframes规则定义的动画效果，它可以让我们创建更加复杂、多样的动画效果，通过定义不同的关键帧，让元素在不同的时间点采取不同的外观和状态。以下是一个简单的例子：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s linear infinite;
}

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

上面的代码中，.box元素会沿着顺时针方向进行旋转，旋转的持续时间是2秒，速度是线性的，无限循环。这种动画是通过animation属性定义的，它会自动按照@keyframes规则中定义的关键帧进行动画效果的映射。

总之，手动动画和自动动画都是CSS3中非常有用的技术，它们可以让我们实现各种各样的动画效果，让页面更加生动、有趣。