23、动画关键帧

动画
    animation
        1、首先要定义一套关键帧
            方法：
                @keyframes 动画名称{
                    0% {
                        相应的样式
                    }
                    10% {
                        相应的样式
                    }
                    20% {
                        相应的样式
                    }
                    100% {
                        相应的样式
                    }
                }
            Tips:可以从0%一直设置到100%

        2、然后调用 动画名称
            方法：
                animation:动画时间 延迟时间 定义的动画名称 运动的方式 动画执行的次数
                    参数1：动画的总时间 接受s和ms单位的数值
                    参数2：动画的延迟时间 接受s和ms单位的数值
                    参数3：定义的动画名称
                    参数4：运动的方式（linear、ease、ease-in、ease-in-out、cubic-bezier等）
                    参数5：动画执行的次数 可以是具体的数值，也可以是无限次(infinite)

        Tips:关键帧动画到最后会回归原始效果，希望保留最后一帧的效果，就需要在animation后面加上最后一帧的效果。

区别于Transform，关键帧动画可以定义复杂的动画，而Transform的更趋近于线性动画，样式较单一。