CSS-动画模块

小解：动画和过渡高度相似，过渡需要人为触发，而动画不用

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

1、动画三要素

（1）告诉系统我们需要创建一个名称叫做xx的动画
（2）告诉系统需要执行哪个动画
（3）告诉系统动画持续的时长

创建动画有两个方式：

创建名为my_test的动画

（1）from to

@keyframes my_test{
   form{
        margin-left:0px;
    }
   to{
        margin-left:150px;
    }
}

（2）百分比

  @keyframes my_test{
        0%{
            transform:rotate(10deg);
        }

        50%{
            transform:rotate(60deg);
        }

        100%{
            transform:rotate(80deg);
        }
    }

2、格式：

1.（速度变化）animation-timing-function:
取值有linear（匀速），ease（逐渐慢下来），ease-in（加速），ease-out（减速），ease-in-out（先加速后减速）

2.（执行次数）animation-iteration-count:具体的次数或关键字 infinite(无限)

3.（往返动画）animation-direction:
normal:默认的取值（执行完一次之后回到启动的位置继续执行下一次）
alternate:往返效果（执行完一次后往回执行下一次）

4.（动画状态）animation-play-state:
running（执行动画）
paused（暂停）
(可以配合hover使用，比如刚开始动画是暂停的，当鼠标移上去的时候就开始动画）

5.（等待时间）animation-delay:秒数

6.（执行秒数）animation-duration:秒数

7.（告诉系统执行哪个动画）animation-name:动画名称

8.（指定动画等待状态和结束状态的样式）animation-fill-mode:
取值：不做任何改变（默认）
forwards：让元素结束状态保持动画最后一帧的样式
backwards：让元素等待状态的时候显示动画第一帧的样式
both：forwards和backwards结合的效果

• 动画有三个状态：
  等待状态
  运行状态
  结束状态

练习的时候学到的一个属性
backface-visibility: hidden  --- 这样表示当元素不正面对（比如围绕X轴旋转超过了90度）屏幕时就隐藏