CSS 动画 | 易学教程

文章目录

@keyframes
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

属性	说明	版本
@keyframes	定义一个动画。	CSS3
animation	复合属性。设置对象动画特效。	CSS3
animation-name	设置动画名称(动画名称由@keyframes定义)	CSS3
animation-duration	设置动画的持续时间	CSS3
animation-timing-function	设置动画的过渡类型	CSS3
animation-delay	设置动画的延迟播放时间	CSS3
animation-iteration-count	设置动画的循环次数	CSS3
animation-direction	设置动画在循环中是否反向运动	CSS3
animation-fill-mode	设置当动画完成或还未开始播放时，要应用到元素的样式。	CSS3
animation-play-state	设置动画是暂停还是播放状态	CSS3

浏览器支持：

@keyframes

使用@keyframes规则，可以创建动画。动画是css样式的变化过程，创建动画就是逐步改变CSS样式。

创建动画时使用％，或关键字"from"和"to"指定样式变化，0％是开头动画，100％是当动画完成。

语法：

@keyframes name {   /*name  定义动画的名称。*/
   selector {       /*值 0-100% 或 from (和0%相同)， to (和100%相同)*/
     css-styles;    /*一个或多个合法的CSS样式属性*/
  }
}

基本用法示例：

@keyframes mymove{
  from {top:0px;}  /*等同：0%{ top:0px; } */
  to {top:200px;}  /*等同：100%{ top:200px; } */
}

/* 兼容低版本浏览器 */
@-webkit-keyframes mymove {
  from {top:0px;}
  to {top:200px;}
}

/* 定义多个过程*/
@-webkit-keyframes mymove {
  0%{ width:100px; top:100px; left:100px; }
  20%{ width:150px; top:150px; left:150px; }
  50%{ width:120px; top:120px; left:110px; }
  100%{ width:100px; top:90px; left:70px; }
}

animation

复合属性。可以在一个声明中定义动画的所有属性。
语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation: 动画名持续时间过渡类型延迟时间循环次数是否往返 fill-mode play-state;

这些属性中动画名和持续时间是必须的，其他属性都可以省略，省略的属性取默认值。

div{
  -webkit-animation:mymove 5s infinite; /*低版本 Safari 和 Chrome */
  animation:mymove 5s infinite;
}

@-webkit-keyframes mymove {
  from {top:0px;}
  to {top:200px;}
}
@keyframes mymove{
  from {top:0px;}  /*等同：0%{ top:0px; } */
  to {top:200px;}  /*等同：100%{ top:200px; } */
}

animation-name

animation-name 属性指定动画名称。

值	描述
keyframename	动画名称
`none`	指定有没有动画（可用于覆盖从级联的动画）

-webkit-animation-name:mymove; /*低版本 Safari 和 Chrome */
animation-name:mymove;

animation-duration

animation-duration属性定义动画完成一个周期需要多少时间。单位s(秒)或ms(毫秒)，默认值0。

-webkit-animation-duration:2s; /*低版本 Safari 和 Chrome */
animation-duration:2s;

animation-timing-function

animation-timing-function 指定动画变化类型，速率。

值	描述
`linear`	匀速变化。
`ease`	默认。动画以低速开始，然后加快，在结束前变慢。
`ease-in`	动画以低速开始。
`ease-out`	动画以低速结束。
`ease-in-out`	动画以低速开始和结束。
`cubic-bezier(n,n,n,n)`	n是从 0 到 1 的数值。

div{
  -webkit-animation-timing-function:linear; /*低版本 Safari and Chrome */
  animation-timing-function:linear;
}

与 cubic-bezier 函数对比

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

上例中设置依次等效下面：

#div1 {animation-timing-function:cubic-bezier(0,0,0.25,1);}
#div2 {animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function:cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function:cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function:cubic-bezier(0.42,0,0.58,1);}

animation-delay

animation-delay 属性定义动画什么时候开始。单位s(秒)或ms(毫秒)。

-webkit-animation-delay:2s; /*低版本 Safari 和 Chrome */
animation-delay:2s;

提示: 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

animation-iteration-count

animation-iteration-count 属性定义动画应该播放多少次。

值	描述
n	一个数字，定义应该播放多少次动画
`infinite`	指定动画应该播放无限次（永远）

-webkit-animation-iteration-count:3; /*低版本 Safari and Chrome*/
animation-iteration-count:3;

animation-direction

animation-direction 属性定义是否循环交替反向播放动画。

值	描述
`normal`	默认值。动画按正常播放。
`reverse`	动画反向播放。
`alternate`	动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
`alternate-reverse`	动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。

-webkit-animation-direction:alternate; /*低版本 Safari 和 Chrome */
animation-direction:alternate;

注意：如果动画被设置为只播放一次，该属性将不起作用。

animation-fill-mode

animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
默认情况下，CSS 动画在完成后会回到原始样式。animation-fill-mode 属性可重写该行为。

值	描述
`none`	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
`forwards`	在动画结束后(循环次数跑完)保持最后一帧的样式。
`backwards`	非往返设置时（当 animation-direction 为 “normal” 或 “alternate” 时）：动画在执行时或延迟执行前是第一样式(例如0%时的样式)。返设置时（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）：动画在执行时或延迟执行前是最后样式(例如100%时的样式)。
`both`	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

-webkit-animation-fill-mode:forwards; /*低版本 Safari 和 Chrome */
animation-fill-mode:forwards;

animation-play-state

animation–play-state 属性指定动画是否正在运行或已暂停。

值	描述
`paused`	指定暂停动画
`running`	指定正在运行的动画

-webkit-animation-play-state:paused; /*低版本 Safari 和 Chrome */
animation-play-state:paused;

来源：CSDN

作者：shenwen5225

链接：https://blog.csdn.net/shenwen522519753/article/details/103760840

标签

动画

css3动画

webkit

css

animation