animation动画

定义

animation是一个复合属性，包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode共8个子属性

• animation-name: 动画名称(默认值为none)
• animation-duration: 持续时间(默认值为0)
• animation-timing-function: 时间函数(默认值为ease)
• animation-delay: 延迟时间(默认值为0)
• animation-iteration-count: 循环次数(默认值为1)
• animation-direction: 动画方向(默认值为normal)
• animation-play-state: 播放状态(默认值为running)
• animation-fill-mode: 填充模式(默认值为none)

animation-duration 动画指定需要多少秒或毫秒完成
值：time 默认值为 0，意味着没有动画效果

animation-timing-function 设置动画如何完成一个周期
值：linear 匀速
ease 先慢后快，结束前变慢 默认
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始和结束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

animation-delay 动画在启动前的延迟间隔
值：time 默认值为 0

animation-iteration-count 动画的播放次数
值：n 一个数字，定义播放多少次动画 默认值1
infinite 动画无限次播放

animation-direction 是否轮流反向播放动画
值：normal 正常
reverse 反向播放
alternate 在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放
alternate-reverse 在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放

关键帧
animation制作动画效果需要两步，首先用关键帧声明动画，再用animation调用动画

关键帧的语法是以@keyframes开头，后面紧跟着动画名称animation-name。from等同于0%，to等同于100%。百分比跟随的花括号里面的代码，代表此时对应的样式

@keyframes test{
    100%{background-color: black;}
    60%{background-color: lightgray;}
    30%{background-color: lightgreen;}
    0%{background-color: lightblue;}
}

div{
    width: 300px;
    height: 100px;
    background-color: pink;
    animation-name: test;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

若存在多个@keyframes，浏览器只识别最后一个@keyframes里面的值 (并且空的也会覆盖前面的值)

@keyframes test{
    0%{background-color: #ccc;}
    30%{background-color: #fff;}
    60%{background-color: lightgray;}
    100%{background-color: black;}
}
@keyframes test{
    0%{background-color: blue;}
    30%{background-color: green;}
    60%{background-color: gray;}
    100%{background-color: black;}
}