CSS animation动画

animation动画

animation是一个复合属性，包括animation-name等8个子属性； 多个子属性之间可以用空格隔开。

 

 制作animation动画时，可以分为两步。

第一步：设置关键帧。

关键帧以以@keyframes开头，+animation name{}

花括号里面的代码使用from、to，from相当于0%，to相当于100%。

当分别在每一个百分比中给元素加上不同的属性时，能够让元素达到不断变化的效果，例如移动、改变颜色、位置等。

第二步：调用animation动画。

Animation能够在不需要触发任何事件的情况下可以随着时间变化来改变元素CSS的属性值，达到一种动画的效果。