CSS动画animation

Posted 2021-12-10 橘猫吃不胖～

CSS动画

• 1.1 @keyframes
• 1.2 动画的属性
• • 1.2.1 animation-name
  • 1.2.2 animation-duration
  • 1.2.3 animation-timing-function
  • 1.2.4 animation-delay
  • 1.2 5 animation-iteration-count
  • 1.2.6 animation-direction
  • 1.2 7 animation-play-state
  • 1.2.8 animation-fill-mode
  • 1.2.9 animation

1.1 @keyframes

在CSS3中，@keyframes规则用于创建动画。

语法为：

@keyframes name {
    keyframes-selector {
        css-style;
    }
}

name：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。
keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。
css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。

1.2 动画的属性

1.2.1 animation-name

animation-name属性用于定义要应用的动画名称，不能省略，用于引用动画。

格式为：

animation-name: keyframename | none;

animation-name 属性初始值为none，适用于所有块元素和行内元素。keyframename参数用于规定需要绑定到选择器的keyframe的名称，如果值为none，则表示不应用任何动画，通常用于覆盖或者取消动画。

1.2.2 animation-duration

animation-duration属性用于定义整个动画效果完成所需要的时间，以秒或毫秒计。

格式为：

animation-duration: time;

animation-duration 属性初始值为0，适用于所有块元素和行内元素。time参数是以秒（s）或者毫秒（ms）为单位的时间，默认值为0，表示没有任何动画效果。当值为负数时，则被视为0。

1.2.3 animation-timing-function

animation-timing-function：设置动画的过渡类型，用来规定动画的速度曲线，可以定义使用哪种方式来执行动画效果。

格式为：

animation-timing-function: value;

常用value属性值如下：

属性值	含义
linear	线性过渡
ease	平滑过渡
ease-in	由慢到快
ease-out	由快到慢
ease-in-out	由慢到快再到慢
cubic-bezier(n,n,n,n)	在cubic-bezier函数中自己的值。可能的值是从0到1的数值

1.2.4 animation-delay

animation-delay属性用于定义执行动画效果之前延迟的时间，即规定动画什么时候开始。

格式为：

animation-delay: time;

参数time用于定义动画开始前等待的时间，其单位是秒或者毫秒，默认属性值为0。animation-delay属性适用于所有的块元素和行内元素。

1.2 5 animation-iteration-count

animation-iteration-count属性用于定义动画的播放次数，默认是0。

格式为：

animation-iteration-count: number | infinite;

animation-iteration-count属性初始值为1，适用于所有的块元素和行内元素。如果属性值为number，则用于定义播放动画的次数；如果是infinite，则指定动画循环播放。

1.2.6 animation-direction

animation-direction属性定义当前动画播放的方向，即动画播放完成后是否逆向交替循环。

格式为：

animation-direction: normal | alternate;

属性值取值如下：

属性值	含义
normal	正常方向
alternate	正常与反向交替

1.2 7 animation-play-state

animation-play-state用来设置动画的状态。

格式为：

animation-play-state: paused | running;

属性取值如下：

属性值	含义
running	运动
paused	暂停

1.2.8 animation-fill-mode

animation-fill-mode用来设置动画之外的状态。

格式为：

animation-fill-mode: none | forwards | baclwards | both;

属性值取值如下：

属性值	含义
none	默认值，不设置对象动画之外的状态
forwards	设置对象状态为动画结束时的状态
backwards	设置对象状态为动画开始时的状态
both	设置对象状态为动画结束或开始的状态

1.2.9 animation

animation属性也是一个简写属性，用于综合设置六个动画属性。

格式为：

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

使用animation属性时必须指定animation-name和animation-duration属性，否则持续的时间为0，并且永远不会播放动画。