专题页网站,WordPress文章提交百度,兰州网站设计教程,设计素材网站会员怎么买划算一、基本概念
animation是 CSS 中的一个属性#xff0c;用于将通过keyframes规则定义的动画应用到元素上。它是一种简写属性#xff0c;能够在一个声明中设置多个动画相关的子属性。
二、语法结构
基本语法为#xff1a;
animation: name duration timing - function de…一、基本概念
animation是 CSS 中的一个属性用于将通过keyframes规则定义的动画应用到元素上。它是一种简写属性能够在一个声明中设置多个动画相关的子属性。
二、语法结构
基本语法为
animation: name duration timing - function delay iteration - count direction fill - mode play - state;
name
这是必需的是通过keyframes定义的动画名称。例如如果有keyframes myAnimation {...}那么这里就写myAnimation。
duration
指定动画完成一个周期所需要的时间以秒s或毫秒ms为单位。例如3s表示动画持续 3 秒。
timing - function
定义动画的速度曲线用于描述动画在每一帧的速度变化。常见的取值有
ease默认值动画开始和结束时较慢中间快。
linear动画以恒定速度进行。
ease - in动画开始时慢然后逐渐加快。
ease - out动画开始时快然后逐渐减慢。
ease - in - out动画开始和结束时慢中间快类似于ease但变化更平缓。
delay
指定动画开始前的延迟时间同样以秒s或毫秒ms为单位。例如1s表示动画会在 1 秒后开始。
iteration - count
定义动画的循环次数。可以是具体的数字如3表示循环 3 次也可以是infinite表示无限循环。
direction
确定动画的播放方向。取值如下
normal默认值动画按照正常顺序播放从keyframes中的起始关键帧到结束关键帧。
reverse动画按照相反顺序播放从结束关键帧到起始关键帧。
alternate动画在偶数次循环时反向播放奇数次循环时正向播放。
alternate - reverse与alternate相反动画在偶数次循环时正向播放奇数次循环时反向播放。
fill - mode
规定动画在播放之前和之后如何应用样式。取值包括
none默认值动画在执行之前和之后不会对元素应用任何样式。
forwards动画结束后元素将保留动画结束时的样式。
backwards动画在延迟期间元素将应用动画开始时的样式。
both结合了forwards和backwards的效果在延迟期间应用开始样式动画结束后保留结束样式。
play - state
用于控制动画的播放状态可以取值为running默认值动画正常播放或paused动画暂停。例如可以通过 JavaScript 来切换这个值从而暂停或恢复动画。
