css动画的属性及基础用法

css3出现以后，css的动画就使用的特别广泛，下面是我在使用css3动画的一些理解。

css3动画的基础用法

@keyframes 动画名称{
  动画的操作属性
}
使用动画的标签{
  animation-name:动画名称;/*需要执行的动画的名字*/
  animation-duration: 3s;/*所需要的时间*/
  animation-iteration-count: infinite;/* 执行次数*/
  ...
}

css3动画的基础属性

下面是对具体值的解释：

类别	属性值	作用
曲线速率	linear	匀速线性运动
曲线速率	steps(数字)	逐帧动画(一般配合精灵图使用）
曲线速率	ease-in-out	慢速开始和结束
动画次数	number	定义运动的次数，默认是一次
动画次数	infinite	无限运动
动画方向	alternate	逆向运动(运动次数需要大于1才能看出效果)
动画终点	none(默认值)	默认终点是原点
动画终点	forwards	在运动结束的之后，停到结束位

## 示例演示：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画示例演示</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #550000;
      margin: 100px auto;
      color: white;
      border-radius: 50%;
      padding: 10px;
      text-align: center;
      animation: ani 3s 2 linear forwards alternate;
      
    }
    .box:hover {
      animation-play-state: paused;
    }
    @keyframes ani {
      form {}
      to {
        transform: translateY(400px);
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>动画示例演示</h2>
  </div>
</body>
</html>