CSS动画效果

animation

创建一个剧本(关键帧)

@keyframes erwang{

0%{

transform: rotate(0);

}

100%{

transform: translateX(300px);

}

}

使用剧本(关键帧)

animation-name: erwang;

剧本使用时间

animation-duration: 2s;

动画的运动方式animation-timing-function

动画执行完后的状态animation-fill-mode forwards保持结束后的状态，默认保持回到原来的状态

动画执行的顺序animation-direction。默认正向，reserve是反向

动画的执行次数animation-iteration-count

停止动画animation-play-state: paused;