animation
是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果
相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果
动画的基本使用:
- 动画序列
- 0% 是动画的开始,100%是动画完成。这样的规则就是动画序列
- 在@
keyframes
中规定某项css样式,就能创建有当前样式逐渐改为新样式的动画效果 - 动画是使元素从一种样式逐渐变化为另一种样式的效果,我们可以改变任意多的次数
- 用百分比规定变化发生的时间,或用关键字form和to ,等同于0%和100%
- 元素使用
div {
width: 100px;
height: 100px;
background-color: red;
/* 调用动画 */
animation-name: move;
/* 动画持续时间 */
animation-duration: 4s;
}
动画的常用属性:
属性 | 描述 |
---|---|
@keyframes | 规定动画。 |
animation | 所有动画属性的简写属性。 |
animation-name | 规定@keyframes 动画的名称。 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
animation-timing-function | 规定动画的速度曲线。默认是 ease 。 |
animation-delay | 规定动画何时开始。默认是 0。 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
animation-direction | 规定动画开启逆向播放。默认是 normal ,逆向是alternate |
animation-fill-mode | 规定当动画结束时的状态。停止在结束点是”forwards”,回到开始点是”backwards” |
animation-play-state | 规定动画的运行或暂停。通常用于鼠标经过事件。默认是running ,还有pause 。 |
动画简写属性
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 反方向 动画起始或结束的状态
animation: name duration timing-function delay iteration-count direction fill-mode;
- 简写属性里面不包含
animation-play-state
- 暂停动画:
animation-play-state: puased;
经常与鼠标经过时间搭配 - 想要动画走回来,而不是调回来:
animation-direction: alternate
- 盒子动画结束后,停在结束位置:
animation-fill-node : forwards
速度曲线细节
animation-timing-function:
规定动画的速度曲线 ,默认是ease
值 | 描述 |
---|---|
linear | 匀速 |
ease | 默认 |
ease-in | 先慢后匀速 |
ease-out | 先匀速后慢 |
ease-in-out | 先慢后匀速再慢 |
strps() | 指定时间函数中的间隔数量(步长) |
例如:animation: w 4s steps(10)
//意思为分十步结束进度