动画
动画animation是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。
动画的基本使用
制作动画分为两步∶
- 先定义动画
- 再使用(调用)动画
- 用keyframes定义动画(类似定义类选择器)
1. keyframes定义动画(类似定义类选择器)
keyframes 动画名称{
0%{
width: 100px;
}
100%{
width: 200px;
}
}
2.动画序列
- 0%是动画的开始,100%是动画的完成。这样的规则就是动画序列。
- 在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多样式任意多的次数。
- 请用百分比来规定变化发生的时间,或用关键词"from"和"to”,等同于0%和100%。
3…元素使用(调用)动画
div {
width: 200px;
height: 200px;
background-color: aqua;、
margin: 100px auto;
/大调用动画*/
animation-name:动画名称;
/大持续时间 */
animation-duration:持续时间;
}
动画的常用属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gz0m25sB-1688964052447)(image-65.png)]
动画的简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
animation:myfirst 5s linear 2s infinite alternate;
注意
- 简写属性里面不包含animation-play-state
- 暂停动画:animation-play-state: puased;经常和鼠标经过等其他配合使用
- 想要动画走回来,而不是直接跳回来:animation-direction : alternate
- 盒子动画结束后,停在结束位置: animation-fill-mode : forwards
速度曲线细节
animation-timing-function:规定动画的速度曲线,默认是“ease"