动画(animation):
将静态的页面变得动起来,并且不同于过渡,可以不需要触发,仅设置时间就可以实现。也可以无限重复等。
使用步骤:
- 通过设置@keyframs关键帧 定义动画 并命名
- 通过animation来调用动画
定义动画:
@keyframs +动画名(尽量不要使用关键代码,可能会引起冲突){
from{ 初始帧
}
to{ 结束帧
}
}
调用动画:
animation:动画名(-name) 动画完成时间(-duration) 执行次数(-iteration-count) 运动曲线(-timing-function) 是否反向执行(-direction) 延迟时间(-delay);
animation为复合元素,可以拆分成括号中的。
此外还有:animation-play-state定义动画进行或者暂停
animation-fill-mode定义对象动画之外的状态。
调用动画是前两个不可以少,其他的可以看情况省略,不需要全部写。
百分比动画:
不同与之前的from……to……
可以让动画拆分成0到100%可以实现动画多段进行并给单个节点设置属性
@keyframs 动画名{
0%{
初始帧
}
50%{
}
100%{
结束帧
}
}
一般情况:如果我们不设置开始针或结束帧,默认元素的初始状态作为初始帧或结束帧。
动画属性:
动画调用的时候已经提到过了
咱们可以将animation复合属性拆分为单一属性写法
1.定义动画的名字
animation-name:动画名;
强调不要使用关键字
2.完成时间:
执行一次动画所用的时间s/sm
animation-duration:2s;
3.动画执行的方向:
animation-direction:alternate;
属性值:
- normal 正常 默认值
- reverse 反向 结束帧到开始帧
- alternate 交替 alternate会计算执行次数。
4.延迟时间:
animation-delay:2s;
5.动画填充模式:
animation-fill-mode:forwrads;
属性值:
- forwards:保持动画结束时的状态
- backwards:保持动画开始时的状态
- both:动画开始时,保持0%,动画结束时,保持100%。
6.运动曲线:
animation-timing-function:linear;
属性值:
- linear 匀速 默认值
- ease 减速
- ease-in 加速
- ease-in-out 先加速后减速
- steps()分割成几步执行
7.多个动画使用:
animation-name: 动画1,动画2,动画3;
animation-duration:4s 2s;
若只有一个动画时间,所有动画都会执行同一时间。若有两个值,三个动画,第三个动画会从头开始取值。
8.多个动画的属性层叠:
多个动画定义了属性层叠,动画名在后面的优先级比在前面的高。
若后面的动画执行完了,前面的动画还未执行完,层叠的属性才会交给前面的动画去执行。
9.动画的暂停:
/*暂停*/
animation-play-state:paused;
/* 播放*/
animation-play-state:running;