两步完成动画设置
(示例:让风车图片旋转的同时,移动位置)
1、在设置动画前初始状态下的样式规则中(定位position一般为relative),绑定对应动画动作的关键帧,设置持续时间
#animation_div{
animation: animation_keyframes 4s; position: relative;}
2、定义关键帧:设置动画从0%开始到100%结束的动作。
@keyframes animation_keyframes {
0%{left:0px;top:0px;}
50%{left: 100px;top:100px;}
100%{left:200px;top:200px;transform: rotate(360deg);
}
示例: