当前位置：首页 > article >正文

自学前端第二十四天:Animation动画栈帧效果

article 2025/8/21 21:28:26

CSS3 帧动画 amimation @keyframes

amimation 是transition过渡的高级升级版

1.为什么要 amimation 一帧一帧的具体动画,因为transition进行单一型动画效果(且hover不点击时则会复原),而amimation@keyframes可以进行复合型(多帧)多运动的动画效果

2.设置了amimation的盒子也是不脱离文档流的,除非变为绝对定位.

3.amimation不会增加元素个数 , 而是可以很多段自定义的时间内让元素完成transform的各种形变而已.(元素还是得提前布置好的)

4.transition只能一次性,而amimation 可以设置播放次数

5

.transition必须是和hover搭配来设置过渡效果的,即鼠标点击就开始过渡变化,否则直接过渡是在平面没变化体现不出的.

而amimation 是在 @keyframes { }上触发设置变化动画效果的,不搭配hover,直接在平面就有一帧一帧的动画效果,可以还可以循环播放和暂停(搭配hover),比transition强大很多,

在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。

animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性keyframes来完成逐帧动画的

@keyframes 关键帧

通过@keyframes设置自定义名称的动画关键帧在动画关键节点设置数值

animationName：动画名称，开发人员自己命名；
percentage：为百分比值，可以添加多个百分比值；
properties：样式属性名称，例如：color、left、width等等。

@keyframes animationName {from {properties: value;}percentage {properties: value;}to {properties: value;}
}
//or (推荐)
@keyframes animationName {0% {properties: value;}percentage {properties: value;}100% {properties: value;}
}

animation 播放动画

①animation-name(动画名字)

它是用来设置动画的名称，可以同时赋值多个动画名称，用,隔开：

.selector {animation-name: none | IDENT[,none | IDENT]*;
}

②animation-duration(持续时间)

它是用来设置动画的持续时间，单位为s，默认值为0：

.selector {animation-duration: <time>[,<time>]*;
}

③animation-timing-function(什么速度形式)

和transition-timing-function类似：

.selector {animation-timing-function:ease加速 | linear匀速 | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>);
}

④animation-delay(触发动画开始播放的延时)

它是来设置动画的开始时间，单位是s或者ms，默认值为0：

.selector {animation-delay: <time>[,<time>]*;
}

⑤animation-iteration-count(即动画播放次数,而transition只能一次性)

它是来设置动画循环的次数，默认为1，infinite为无限次数的循环：

.selector {animation-iteration-count: number | infinite
}

⑤animation-direction

它是来设置动画播放的方向，默认值为normal表示向前播放，alternate代表动画播放在第偶数次向前播放，第奇数次向反方向播放：：

.selector {animation-direction: normal | alternate [, normal | alternate]*;
}

⑥animation-play-state .(该通常和hover搭配使用,鼠标点击的时候就暂停动画效果)

它主要是来控制动画的播放状态：running代表播放，而paused代表停止播放，running为默认值：

PS: animation-play-state 无法通过animation复合书写只能单例设置与 transform-origin 一样

.selector {animation-play-state:running | paused [, running | paused]*;
}

总结animation 复合写法

它是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction的简写：

.selector {animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*;
}