动画

语法：animation：xxx属性； 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面 构成动画的最小单元：帧或动画帧

定义动画

        @keyframes 动画名称 {
            form{}
            to{}
        }

        @keyframes change {
            0%{}
            20%{}
			30%{}
        }

动画属性

animation: name duration timing-function delay iteration-count direction fill-mode;

动画名称

动画名称：animation-name（必须写）

动画时长

动画时长：animation-duration（必须写）

速度曲线

速度曲线：animation-timing-function 匀速：linear 帧数：steps（数字）动画几份，帧数就写几

延迟时间

延迟时间：animation-delay 注意点:当有两个时间出现时，第一个一定是动画时长

重复次数

重复次数：animation-iteration-count 取值：直接数字 无限次：infinite

动画执行方向

动画执行方向:animation-direction 默认值normal 先正再正 先正再反 alternate(常用) 先反再反 reverse 先反再正 alternate-reverse

动画执行的状态

动画执行的状态：animation-fill-mode 注意点：状态跟重复次数和执行方向相反，不和它们一起出现

backwards：延迟后第一帧的状态 forwards：动画结束最后一帧的状态

暂停动画

暂停动画：animation-play-state(经常配合：hover使用) 暂停：paused 播放：running(默认值)

多组动画

可以设置多组动画

案例注意点

走马灯：无缝滚动 技巧 两个大盒子 外层盒子设置可见范围的宽度和高度 里层盒子用来存放多张图片（里面要存放多少张图片，设置宽度为多少！！ ） 2 真实存放的图片张数 比实际的要多 看你一下的外层盒子能装几张 ，在实际里层盒子加可见图片数量（浮动） 3 设置动画 1 设置内层盒子的位移 等于 真实的那几张图片的位移！ 2 设置动画无限滚动！！