CSS3:2D动画
程序员文章站
2024-01-24 15:32:28
...
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
动画的基本使用
- 先定义动画
举例:
@keyframes move {//此时move为动画名称
0%{//百分之0,表示刚开始的状态
transform: translateX(0px);
}
100%{//100%表示结束时的状态
transform: translateX(1000px);
}
}
而如果我们要让盒子绕一个顺时针走动动画,则可以添加状态变化关键帧:
2. 调用动画:
div{
width: 200px;
height: 200px;
animation: move 2s infinite;//调用动画名称move,持续时间为2s
}
- animation-delay:规定动画何时开始,默认是0
注意简写模式中:delay的秒数放在持续时间后面! - animation-direction:规定一个周期结束时是回到起点还是原路返回(逆向播放)
- animation-fill-mode:规定动画结束后还是否回来,forwards停留在最后的那个位置。backwards回到起始位置
- animation-play-state:规定动画运行还是暂停,常用在用鼠标悬浮让其停止运动(简写方式里不支持animation-play-state)
div:hover{
animation-play-state: paused;//鼠标悬浮让其停止运动
}