制作动画分为两步
    1.先定义动画（声明）
    2.再使用（调用）动画
    1.用keyframes定义动画（类似定义选择器）

    1. @keyframes 动画名称{
    2.             0%{
    3.                 width: 100px;
    4.             }
    5.             100%{
    6.                 width: 200px;
    7.             }
    8.         }

    动画序列

    • 0%是动画的开始，100%是动画的完成。这规则是动画序列
    • 在@keyfremes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
    • 动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的次数
    • 用百分比来规定变化发生的时间，或用关键词“form”和“to”，等同于0%和100%

    2.元素使用动画

    div{
    /* 调用 */
    animation-name:动画名称;
    /* 持续时间 */
    animation-duration:s/ms      动画完成一个周期所花费的时间。默认是0秒
    animation-timing-function    动画的速度曲线。默认是 "ease"
}

    3.动画的常用属性
    image.png
    简写属性：
    animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画其实或者结束的状态
    速度曲线细节
    animation-timing-funtion:规定动画的速度曲线，默认是“ease”
    image.png
    steps(n)就是分几步来完成动画，有了steps不要再写ease或linear