一、动画常用属性

属性	含义
animation（动画）	用于设置动画属性，他是一个简写的属性，包含6个属性
transition（过渡）	用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform（变形）	用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
translate（移动）	translate只是transform的一个属性值，即移动。

transition（过渡）

什么叫过渡？字面意思上来讲，就是元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green)，这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的:hoever、:focus、:checked等。

语法：transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称
transition-duration	规定完成过渡效果需要多少秒或毫秒
transition-timing-function	规定速度效果的速度曲线
transition-delay	定义过渡效果何时开始

transform（变形）

transform 分为2D 和 3D，其主要包含以下几种变换：translate位移，scale缩放，rotate旋转，skew扭曲等。

2D变形：

translate位移

transform: translate(50px, 100px);
transform: translateX(50px);  // x方向移动50px
transform: translateY(100px);

scale缩放

transform: scale(2, .5);
transform: scaleX(2);   // x方向增加一倍
transform: scaleY(.5);  // y方向缩小一倍

rotate旋转：rotate（正数表示顺时针旋转，负数表示逆时针旋转）

transform: rotate(30deg);

skew扭曲

transform: skew(30deg, 30deg);
transform: skewX(30deg);
transform: skewY(30deg);

3D变形：

translate位移： translate(x, y, z);

scale缩放： scale(x, y, z);

rotate旋转：rotate3d(x, y, z, angle) (angle:表示3D舞台上旋转的角度)

animation（动画）

在官方的介绍中这个属性是transition属性的扩展，弥补了transition的很多不足。

语法：animation: name duration timing-function delay iteration-count direction play-state fill-mode;

值	描述
name	用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致
duration	指定元素播放动画所持续的时间
timing-function	规定速度效果的速度曲线，是针对每一个小动画所在时间范围的变换速率
delay	定义在浏览器开始执行动画之前等待的时间，值整个animation执行之前等待的时间
iteration-count	定义动画的播放次数，可选具体次数或者无限(infinite)
direction	设置动画播放方向：normal(按时间轴顺序),reverse(时间轴反方向运行),alternate(轮流，即来回往复进行),alternate-reverse(动画先反运行再正方向运行，并持续交替运行)
play-state	控制元素动画的播放状态，通过此来控制动画的暂停和继续，两个值：running(继续)，paused(暂停)
fill-mode	控制动画结束后，元素的样式，有四个值：none(回到动画没开始时的状态)，forwards(动画结束后动画停留在结束状态)，backwords(动画回到第一帧的状态)，both(根据animation-direction轮流应用forwards和backwards规则)，注意与iteration-count不要冲突(动画执行无限次)

.box {
  height: 100px;
  width: 100px;
  border: 15px solid black;
  animation: changebox 1s ease-in-out 1s infinite alternate running forwards;
}
.box:hover {
    animation-play-state: paused;
}
@keyframes changebox {
  10% {
      background: red;
  }
  50% {
      width: 80px;
  }
  70% {
      border: 15px solid yellow;
  }
  100% {
    width: 180px;
    height: 180px;
  }
}