单词：

    animation 动画

    keyframes 关键帧

    duration 持续时间、期间

    delay 延迟、推迟

    fuction 功能、函数

    ease 缓解、减轻、（使）缓缓地移动

    linear 线性的、直线的

    iteration 迭代

    count 计数、计次

    direction 方向、方位

    alternate 交替、轮流/候补、代理人

    reverse 颠倒、使完全相反

    fill 填满、充满、装满

    mode 模式、方式、风格、样式

    backwards 向后、朝反向、倒着

    forwards 发送、转寄、转投

    infinite 极大的、无限的、无穷无尽的

    第一种、定义关键帧

    @keyframes 动画名称{

    from{

    初始状态

    }

    to{

    结束状态

    }

    }

    第二种、百分比定义

    @keyframes 动画名称

    0%{

    初始状态

    }

    100%{

    结束状态

    }

    }

    与元素绑定

    1） animation-name: 动画名字;

    /*

    将动画和元素绑定，动画名字不需要加符号包起来

    绑定多个动画名称，逗号隔开

    */

    2） animation-duration:动画持续时间；

    /*

    绑定动画时间，单位ms、s

    想给不同动画绑定不同时间，也可以将不同动画时间用逗号隔开，需要与动画一一对应

    */

    3） animation-delay:动画延迟时间；

    4） animation-timing-fuction 动画的运动状态

    /*

    ease 默认 每一帧之间都是先快后慢的过渡

    ease-in

    ease-out

    ease-in-out

    linear 线性的匀速运动过渡

    贝塞尔曲线

    跳帧动画

    没有过渡动画，直接从一帧跳到下一帧

    steps(count,end/start) 默认end

    end 跳过最后一帧

    start 跳过第一帧

    step-start === steps(1，start)

    step-end === steps(1,end)

    */

    5） animation-iteration-count:动画执行次数；

    /*

    1 默认

    数字

    infinite 无数次

    */

    6）animation-direction:动画的方向；

    /*

    normal 正向，默认

    reverse 反向

    alternate 先正后反，需要两次及以上的执行次数

    alternate-reverse 先反后正，需要两次及以上的执行次数

    */

    7） animation-fill-mode:动画时间之外的状态；

    /*

    none 没有，默认

    backwards 开始时就直接停在动画第一帧的位置，例如在动画有延迟时间时不加这个属性那么动画开始会停在默认状态，加了之后在开始之前会停在动画初始帧的位置

    forwards 停止时停在动画的最后一帧的位置不回到默认位置

    backwards + forwards

    */

    简写动画 - 图1

    animation-play-state：动画的状态；

    pause 暂停

    running 运动（默认）

    这条属性不要写在简写里面，这是放在外面可以控制的属性；