动画(animation)
可以通过设置多个节点来精确一个或一组动画,常用来实现复杂的动画效果
相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果
制作动画分为两步:
- 先定义动画
- 在使用(调用)动画
1.定义动画
使用@keyframes定义动画(类似定义类选择器)
@keyframes 动画名称 {
/* 开始状态 */
0% {
width: 100px;
}
/* 结束状态 */
100% {
width: 300px;
}
}
2.元素使用动画
div {
width: 100px;
height: 100px;
margin: 100px auto;
background-color: pink;
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
动画序列
- 0%是动画的开始,100%是动画的完成,这样的规则就是动画序列
- 在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使元素从一种样式逐渐变化为另一 种样式的效果,您可以改变任意多的样式任意多的次数
- 请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%
animation-timing-function: 规定动画的速度曲线,默认是“ease”
animation-name: move; /* 动画名称 */
animation-duration: 3s; /* 持续时间 */
animation-timing-function: ease; /* 运动曲线 */
animation-delay: 1s; /* 何时开始 */
animation-iteration-count: infinite; /* 重复次数 infinite无限重复 */
animation-direction: alternate; /* 是否反方向播放 默认normal 反方向就写alternate */
animation-fill-mode: forwards; /* 动画结束后的状态默认是backwards回到起始状态 停留在结束状态就写forwards */
动画简写
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态;
animation: move 3s linear .5s infinite alternate;
- 简写属性里面不包括暂停动画animation-play-state:
- 暂停动画:animation-play-state: puased; 经常和鼠标经过等其他配合使用
- 想要动画走回来,而不是直接跳回来:animation-direction: alternate;
- 盒子动画结束后,想要停在结束位置:animation-fill-mode: forwards;