Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时间,重复次数,如何重复来控制关键帧的行为。
Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。
动画
-过渡和动画之间的区别:
- 不同点: 过渡必须人为的触发才会执行动画 动画不需要人为的触发就可以执行动画
- 相同点: 过渡和动画都是用来给元素添加动画的 过渡和动画都是系统新增的一些属性 过渡和动画都需要满足三要素才会有动画效果
-animation-name:
指定要绑定到选择器的关键帧的名称,告诉系统需要执行哪个动画
通过@keyframes来设置动画序列,序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。
关键帧使用了一个百分比来表示在动画序列中出现的时间。
0%表示动画的初始时间,也可以通过from关键字表示。
100%表示动画的结束时间,也可以通过to关键字表示。
关键帧:
关键帧: @keyframes animiationName{ keyframes-selector{ css-style; } }
-animation-duration