制作动画的步骤
1.先定义动画
2.再使用调用动画
定义动画
@keyframes 动画名称{
/* 开始状态 */
0%{
transform:translateX(0px);
}
/* 结束状态 */
100% {
transform:translateX(1000px)
}
}
}
调用动画
在要用的元素中调用
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间*/
animation-duration: 持续时间;
动画序列
1.可做多个状态的变化 from to =0% 100%
2.里面的百分比必须是整数
3.里面的百分比指总的时间的划分