抛出问题：什么是css动画？
- 动画使元素逐渐从一种样式变为另一种样式。
- 我们可以随意更改任意数量的 CSS 属性。
- 如需使用 CSS 动画，您必须首先为动画指定一些关键帧。
- 关键帧包含元素在特定时间所拥有的样式。
语法：
- 首先要定义动画
- 方式1
@keyframes move {
/* 开始 */
0% {
/* 代码块 */
}
/* 结束 */
100% {
/* 代码块 */
}
}
- 方式2
@keyframes move {
from {
/* 代码块 */
}
to {
/* 代码块 */
}
}
动画属性
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
- transform: translate(0, 0);
- duration 持续时间
- timing-function运动曲线
- delay动画何时开始
- iteration-count 动画被播放的次数 infinite无限
- direction是否在下一个周期逆向变化 alternate逆向,跑马灯哦
- fill-mode 规定动画结束后的状态
- animation-play-state: paused;鼠标经过，动画暂停
- animation-fill-mode : none | forwards | backwards |both;
- ......
步长 steps(n)
/* w为你定义的动画名 8秒为动画时间 步长 forwards则是停在动画最后的的那个画面 */
animation: w 8s steps(15) forwards;
举个栗子：
...
@keyframes move {
0% {
transform: translate(0, 0);
}
/* 第一次变化 */
25% {
transform: translate(500px, 0px);
}
/* 第二次变化 */
50% {
transform: translate(500px, 500px);
}
/* 第三次变化 */
75% {
transform: translate(0px, 500px);
}
/* 第四次变化 */
/* 到了75%的时候其实已经回到原点，但是原理上应该加上100% */
100% {
transform: translate(0px, 0px);
}
}
div {
width: 200px;
height: 200px;
background-color: #333;
animation-name: move;
animation-duration: 3s;
}
...
<body>
<div> 我是一个盒子 </div>
</body>
输出结果
输出结果.png
