CSS帧动画

CSS帧动画

1、定义关键帧

@keyframes 动画名称（英文） {
            0% {
                /* 动画的开始 */
            }

            25% {
                /* 在25%的时候进行的一个动画 */
            }

            50% {
                /* 在50%的时候进行的一个动画 */
            }

            100% {
                /* 动画结束 */
            }

        }

from,to表示开始、结束状态，也可以使用0%,100%定义

        @keyframes 动画名称（英文） {
            from {
                /* 动画开始 */
            }

            to {
                /* 动画结束 */
            }
        }

2、引用帧动画

 animation: name duration timing-function delay iteration-count direction fill-mode;
 animation: 动画名称 动画执行时间 动画速度曲线 延迟时间 动画播放次数 动画运动方向 动画结束之后显示的状态

   注意：动画名称和动画执行时间必须写，否则动画无效<