动画

动画和过渡的区别
1.过渡必须触发，需要两个状态的改变
2.动画可以一直运行下去，不需要出发。实现效果和过渡差不多

在css3中，动画和js的函数使用比较类似：
先定义 --> 再调用  -->  一次定义多次调用
定义：

@keyframes 动画名称 {
    from{}
    to{}
    或者
    0%{}
    10%{}
    14%{}
    20%{}
    50%{}
    100%{}
}

调用

animation:动画名称 执行时间 ...

 示例：

效果：

 

 

 

 

 动画语法详解（前两个属性必写，后面的可选）
1.动画名称 animation-name
2.持续时间 animation-duration:1s
3.执行次数 animation-iteration-count:
　数字
　infinite无数次
4.动画方向 animation-direction:
　alternate反复
5.动画延迟 animation-delay:2s
6.动画结束时保持的状态 animation-fill-mode:
　backwards回到动画的起始状态
　forwards保持动画结束后的状态
7.运动方式 animation-timing-funciton:
　linear匀速
　ease-in-out先加速后减速
　steps(n)让动画分n步完成，构成帧动画效果
8.播放状态 animation-play-state:
　running 运行
　pause 暂停