html5css3重点4：动画animation的使用及steps(n)

1、动画(animation)

1.1 先定义动画再调用定义好的动画。

定义动画

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

调用定义好的动画

div {
	/* 调用动画 */
    animation-name: 动画名称;
 	/* 持续时间 */
 	animation-duration: 持续时间；
}

1.2动画常见属性（一般都是简写）

1.3动画简写方式

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

注意：

• 简写属性里面不包含 animation-play-state
• 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
• 要想动画走回来，而不是直接调回来：animation-direction: alternate
• 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

animation: move 2s linear 1s infinite alternate forwards;

1.4速度曲线之steps(n)

假设是1600px，若是设置为steps(8)，那么每一步就200px。
如果速度够快，就变成动画。
设置的时候，只设置开始和结束。

案例：
（1）打字机
（2）奔跑的熊大

链接： https://blog.csdn.net/qq_42129553/article/details/106193540