1. 制作动画
先定义动画,再使用(调用)动画
使用 keyframes(关键帧)定义动画(类似定义类选择器)
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}
动画序列:
1. 0% 是动画开始,100%是动画完成,这样的规则就是动画序列
2. 在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果
3. 动画是元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多的次数
4. 用百分比来规定变化发生的时间,或用关键词 “from” 和 “to",等同于 0% 和 100%
2. 调用动画(谁使用动画,谁调用动画)
调用动画 animation-name:动画名称;
持续时间 animation-duration:持续时间;
3. 动画常见属性
4. 动画简写属性(前两个属性必须写)
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 结束后的状态;
animation:move 5s linear 2s infinite alternate forwards; // 名称是 move 持续5s动画 匀速行驶 2s后开始 无限循环 反方向 保持结束状态;
重点:
1. 简写属性里面不包括 animation-play-state(鼠标经过暂停动画)
2. 暂停动画:animation-play-state:puased;经常个鼠标经过等其他配合使用
3. 想要动画走回来,而不是直接跳回来:animation-direction:alternate;
4. 盒子动画结束后,停在结束位置:animation-fill-mode:forwards;
5. 速度曲线之 steps 步长
animation-timing-function:规定动画的速度曲线,默认是“ease”
steps 就是分几步来完成我们的动画 有了 steps 就不要再写 ease 或者 linear 了