css3中的三种动画样式用法
一、CSS3动画概述
CSS3提供了强大的动画功能，使开发者能够轻松创建动态、富有动感的网页效果。CSS3动画主要包括三种样式：关键帧动画、转换和过渡。
二、关键帧动画
关键帧动画是使用@keyframes规则创建的动画。@keyframes规则用于创建一个动画名称和一个或多个关键帧，描述了动画开始和结束时的状态。在关键帧之间，元素的状态可以改变。
示例：
```css
@keyframes myAnimation {
  0%  {background-color: red;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
div {
  animation-name: myAnimation;
  animation-duration: 4s;
}
```
在上述代码中，div元素的颜在动画的4秒内从红变为蓝，再变为绿。animation属性定义了要使用的动画名称、持续时间和其他属性。
三、转换动画
CSS3的转换属性允许开发者将元素变形为不同的形状和大小。转换动画允许元素在一段时间内从一个状态转换到另一个状态。
示例：
html animation属性
```css
div {
  transition: transform 2s; /* 2秒内转换属性变化 */
}
div:hover {
  transform: rotate(360deg); /* 鼠标悬停时旋转元素 */
}
```
在上述代码中，当鼠标悬停在div元素上时，元素会在2秒内旋转360度。transition属性定义了动画的持续时间和其他过渡效果。
四、过渡动画
过渡动画是使用transition属性创建的动画。transition属性允许元素从一个状态平滑过渡到另一个状态。过渡动画通常用于改变元素的尺寸、颜等属性。
示例：
```css
div {
  width: 100px; height: 100px; background-color: red;
  transition: all 2s; /* 2秒内改变所有属性 */
}
div:hover {
  width: 200px; height: 200px; background-color: blue; /* 鼠标悬停时改变尺寸和背景 */
}
```
在上述代码中，当鼠标悬停在div元素上时，元素会在2秒内从原始尺寸变为2倍大的尺寸，并且背景也会从红变为蓝。transition属性定义了动画的持续时间和其他过渡效果。
五、总结
CSS3中的三种动画样式（关键帧动画、转换动画和过渡动画）提供了丰富的动画效果，使开发者能够创建动态、富有动感的网页。根据具体需求，可以选择不同的动画样式来实现所需的效果。