HTML和CSS学习-------动画模块

动画模块
1.过渡和动画的异同
1.1 不同点
过渡必须认为的触发才会执行动画
动画不需要认为的触发就可以执行动画
1.2 相同点
过渡和动画都是用来给元素添加动画的
过渡和动画的都是系统新增的一些属性
过渡和动画的都需要满足三要素
2.动画的三要素
2.1 告诉系统需要执行那个动画
animation-name:动画名称；
2.2 告诉系统我们需要自己创建一个名称叫做动画名称的动画
例： @keyframes 动画名称{
from{}
to{}
}
2.3 告诉系统动画持续的时间
animation-duratio:持续时间；
3.动画模块其他属性
animation-delay:ns;----告诉系统延迟多少秒后开始执行动画
animation-timing-function: ;----告诉系统动画执行的速度
animation-iteration-count: ;----告诉系统动画执行的次数
animation-direction: ;----告诉系统是否需要执行往返动画
取值：
normal，默认取值，执行完一次之后回到起点继续执行下一次
alternate,往返动画，执行完一次之后往回执行下一次
animation-play-state: ;----告诉系统当前的动画是否需要暂停
取值：
running:执行动画
paused:暂停动画
通过我们的观察，动画是有一定的状态的
1.等待状态
2.执行状态
3.结束状态
animation-fll-mode: ;----指定动画等待状态和结束状态的样式
取值：
none:不做任何的改变
forwards:让元素结束的状态保持动画最后一帧的样式
backwards:让元素等待状态的时候显示动画第一帧时候的样式
both:让元素等待状态显示动画第一帧时候的样式和结束状态保持动画最后一帧的样式
4.连写
1.动画模块连写格式：
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画；
2.动画模块连写格式的简写
animation:动画名称 动画时长；
注意：1.想让动画运动的不一样，但是时间是一样的就改变它的距离
2.默认情况下增加宽度永远都是向右边增加，要使其从左边开始，则需添加一个负号
5.无限滚动
主要思想是在后面添加一个和开头一样的图片，这样就看不出跳转的效果
优先级更高的会覆盖前面的