文章目录
animation(动画) 属性
语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
值 | 说明 |
---|---|
animation-name | 指定要绑定到选择器的关键帧的名称 |
animation-duration | 动画指定需要多少秒或毫秒完成 |
animation-timing-function | 设置动画将如何完成一个周期 |
animation-delay | 设置动画在启动前的延迟间隔。 |
animation-iteration-count | 定义动画的播放次数。 |
animation-direction | 指定是否应该轮流反向播放动画。 |
animation-fill-mode | 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 |
animation-play-state | 指定动画是否正在运行或已暂停。 |
initial | 设置属性为其默认值。 阅读关于 initial的介绍。 |
inherit | 从父元素继承属性。 阅读关于 initinherital的介绍。 |
@keyframes 规则
语法
@keyframes animationname {keyframes-selector {css-styles;}}
值 | 说明 |
---|---|
animationname | 必需的。定义animation的名称。 |
keyframes-selector | 必需的。动画持续时间的百分比。合法值:0-100% from (和0%相同) to (和100%相同)注意: 您可以用一个动画keyframes-selectors。 |
css-styles | 必需的。一个或多个合法的CSS样式属性 |
一、animation 关键帧使用介绍
1.1 to from 关键字 帧
main {
margin-top: 50px;
width: 100px;
height: 100px;
background-color: white;
animation-name: hj;
animation-duration: 3s;
}
@keyframes hj {
to {
background-color: white;
}
from {
background-color: red;
}
}
1.2 百分比 帧
@keyframes hj {
0% {
background-color: white;
}
100% {
background-color: green;
}
}
@keyframes hj {
0% {
background-color: white;
}
25% {
transform: scale(1.5);
}
55% {
background-color: red;
}
100% {
background-color: green;
}
}
1.3 帧顺序与起始、终点的帧特性
1.3.1 帧顺序颠倒
帧顺序颠倒对动画执行结果没有影响,为了维护方便将帧顺序排列整齐
@keyframes hj {
to {
background-color: red;
}
from {
background-color: white;
}
}
/* 或 */
@keyframes hj {
100% {
background-color: red;
}
0% {
background-color: white;
}
}
1.3.2 起始、终点的帧特性
在不设置 animation-delay 和 animation-fill-mode 的情况下,动画起始、终点样式都是元素的原始样式
1 不设置起始帧,那么默认起始帧的样式就是 main 的原始样式,这样下面的代码动画就是:
起始 => 终点 => 回归原始样式
白 => 红 => 白
main {
margin-top: 150px;
width: 100px;
height: 100px;
background-color: white;
animation-name: hj;
animation-duration: 3s;
}
@keyframes hj {
100% {
background-color: red;
}
}
2 不设置终点帧,那么默认终点帧的样式就是 main 的原始样式,这样下面的代码动画就是:
起始 => 终点 => 回归原始样式
红 => 白 => 白
main {
margin-top: 150px;
width: 100px;
height: 100px;
background-color: white;
animation-name: hj;
animation-duration: 3s;
}
@keyframes hj {
0% {
background-color: red;
}
}
3 起始帧、终点帧都不设置,那么默认起始帧、终点帧的样式就是 main 的原始样式,这样下面的代码动画就是:
起始 => 终点 => 回归原始样式
白 => 红 => 白
main {
margin-top: 150px;
width: 100px;
height: 100px;
background-color: white;
animation-name: hj;
animation-duration: 5s;
}
@keyframes hj {
55% {
background-color: red;
}
}
1.4 案例 移动的小方块
<main>
<div class="box"></div>
</main>
<style>
main {
margin-top: 150px;
width: 400px;
height: 400px;
border: 1px solid #ffffff;
}
.box {
width: 100px;
height: 100px;
background-color: orange;
animation-name: hj;
animation-duration: 4s;
}
@keyframes hj {
25% {
transform: translateX(300px);
}
50% {
transform: translate(300px, 300px);
}
75% {
transform: translateY(300px);
}
}
</style>
1.5 同时声明关键帧规则
当我们的关键帧中存在相同的样式时,是可以提取共同样式的,如下
@keyframes hj {
25% {
transform: translateX(300px);
background-color: green;
border-radius: 50%;
}
50% {
transform: translate(300px, 300px);
background-color: orange;
border-radius: 0;
}
75% {
transform: translateY(300px);
background-color: green;
border-radius: 50%;
}
}
可以改为如下代码,动画效果一致
@keyframes hj {
25% {
transform: translateX(300px);
}
50% {
transform: translate(300px, 300px);
background-color: orange;
border-radius: 0;
}
75% {
transform: translateY(300px);
}
25%, 75% {
background-color: green;
border-radius: 50%;
}
}
1.6 多个动画使用与时间配置
- 一个元素可以设置多个动画,只需用 “,” 隔开;
- 每个动画完成花费的时间
- 如果动画数量与时间配置的个数一致,则动画与完成时间一一对应;
- 如果动画数多于完成时间数,则从第一个完成时间循环使用;
- 1.6.1如下,此时 .box 设置了两个动画,两个动画的完成时间都是 5s
.box {
width: 100px;
height: 100px;
background-color: orange;
animation-name: myTranslate, myBackgroundColor;
animation-duration: 5s;
}
@keyframes myTranslate {
25% {
transform: translateX(300px);
}
50% {
transform: translate(300px, 300px);
}
75% {
transform: translateY(300px);
}
}
@keyframes myBackgroundColor {
25% {
background-color: red;
}
50% {
background-color: aquamarine;
}
75% {
background-color: blue;
}
}
- 1.6.2 如下,此时 .box 设置了三个动画,myBackgroundColor 的完成时间都是 5s,myTranslate 的完成时间都是 4s,myBorderRadius 的完成时间都是 5s
.box {
width: 100px;
height: 100px;
background-color: orange;
animation-name: myTranslate, myBackgroundColor, myBorderRadius;
animation-duration: 5s, 4s;
}
@keyframes myTranslate {
25% {
transform: translateX(300px);
}
50% {
transform: translate(300px, 300px);
}
75% {
transform: translateY(300px);
}
}
@keyframes myBackgroundColor {
25% {
background-color: red;
}
50% {
background-color: aquamarine;
}
75% {
background-color: blue;
}
}
@keyframes myBorderRadius {
25% {
border-radius: 50%;
}
50% {
border-radius: 20%;
}
75% {
border-radius: 50%;
}
90% {
border-radius: 30%;
}
}
1.7 属性重叠对动画的影响
规则
在动画执行的同一时间,谁后出现,谁的权重就高。
换言之,重叠的多个动画属性,会交替出现各自样式;
1.7.1 样式重叠,时间覆盖
在下面代码中,myBackgroundColor
与 myBorderRadius
在动画的前两秒内重叠 background-color
属性,并且 myBorderRadius
在后,因此 myBorderRadius
的权重高。又因为 myBorderRadius
的完成时间是 4s
,因此 myBorderRadius
在 前 50%
时间即 2s
内 展现为 black => green
;两秒过后,myBackgroundColor
的完成时间已过,因此不会再出现 myBackgroundColor
的动画效果。
.box {
width: 100px;
height: 100px;
background-color: orange;
animation-name: myTranslate, myBackgroundColor, myBorderRadius;
animation-duration: 4s, 2s;
}
@keyframes myTranslate {
25% {
transform: translateX(300px);
}
50% {
transform: translate(300px, 300px);
}
75% {
transform: translateY(300px);
}
}
@keyframes myBackgroundColor {
25% {
background-color: red;
}
50% {
background-color: aquamarine;
}
75% {
background-color: blue;
}
}
@keyframes myBorderRadius {
25% {
border-radius: 50%;
background-color: black;
}
50% {
border-radius: 20%;
background-color: green;
}
75% {
border-radius: 50%;
}
}
1.7.2 样式重叠,时间不覆盖,动画之间交叉执行
在上面的基础上,将 .box
中 myBackgroundColor
的完成时间修改为 4s
,这样在 myBorderRadius
的前 50%(2s)
动画执行完成后,会展现出 myBackgroundColor
的后 2s
动画(blue
),效果图如下
.box {
width: 100px;
height: 100px;
background-color: orange;
animation-name: myTranslate, myBackgroundColor, myBorderRadius;
animation-duration: 4s, 4s;
}
1.8. 动画属性中间值
1.8.1 100px => 200px 有中间值
有动画过渡状态
<div class="box"></div>
<style>
.box {
width: 100px;
height: 100px;
background-color: orange;
margin: 100px auto;
animation-name: amplification;
animation-duration: 2s;
}
@keyframes amplification {
100% {
width: 200px;
height: 200px;
}
}
</style>
1.8.2 auto => 200px 无中间值
无动画过渡状态,直接呈现结果;
.box {
width: auto;
height: auto;
background-color: orange;
margin: 100px auto;
animation-name: amplification;
animation-duration: 2s;
}
@keyframes amplification {
100% {
width: 200px;
height: 200px;
}
}
再比如 border: solid;
=> border: dashed;
也是没有中间值的
二、 animation-iteration-count 控制动画执行次数
默认animation-iteration-count: 1
animation-iteration-count: 2; 动画播放 2 次
animation-iteration-count: infinite; 动画播放无数次(循环播放)
<main>
<div class="box"></div>
</main>
<style>
main {
margin-top: 150px;
width: 400px;
height: 400px;
border: 1px solid #ffffff;
}
.box {
width: 100px;
height: 100px;
background-color: orange;
animation-name: myTranslate;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes myTranslate {
25% {
transform: translateX(300px);
}
50% {
transform: translate(300px, 300px);
}
75% {
transform: translateY(300px);
}
}
</style>
三、 animation-direction 动画运动方向
animation-direction
属性是用来定义是否应该轮流反向播放动画的
CSS 语法
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
属性值
值 | 描述 | 测试 |
---|---|---|
normal | 默认值。动画按正常播放。 | 测试 » |
reverse | 动画反向播放。 | 测试 » |
alternate | 动画在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放。 | 测试 » |
alternate-reverse | 动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放。 | 测试 » |
initial | 设置该属性为它的默认值。请参阅 initial。 | |
inherit | 从父元素继承该属性。请参阅 inherit。 |
<div class="box-normal"> normal </div>
<div class="box-reverse"> reverse </div>
<div class="box-alternate"> alternate </div>
<div class="box-alternate-reverse"> alternate-reverse </div>
<style>
.box-normal {
width: 100px;
height: 100px;
background-color: orange;
margin: 100px auto;
animation-name: amplification;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: normal;
}
.box-reverse {
width: 100px;
height: 100px;
background-color: orange;
margin: 100px auto;
animation-name: amplification;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: reverse;
}
.box-alternate {
width: 100px;
height: 100px;
background-color: orange;
margin: 100px auto;
animation-name: amplification;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.box-alternate-reverse {
width: 100px;
height: 100px;
background-color: orange;
margin: 100px auto;
animation-name: amplification;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
@keyframes amplification {
100% {
transform: scale(1.5);
}
}
</style>
案例:弹跳小球体验动画轮换衔接
<div class="ball"></div>
<div class="shadow"></div>
<style>
.ball {
width: 60px;
height: 60px;
background-image: radial-gradient(circle at center, orange, #f65409);
border-radius: 50%;
animation-name: ball;
animation-duration: 1s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
}
.shadow {
position: absolute;
transform: translateY(35px);
width: 30px;
height: 20px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
z-index: -1;
filter: blur(3px);
animation-name: shadow;
animation-duration: 1s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
}
@keyframes ball {
100% {
transform: translateY(-200px);
}
}
@keyframes shadow {
100% {
width: 40px;
}
}
</style>
四、 animation-delay 动画延迟属性
设置动画在启动前的延迟间隔
<div class="box"></div>
<style>
.box {
width: 100px;
height: 100px;
background-color: orange;
animation-name: scale;
animation-duration: 2s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
@keyframes scale {
100% {
transform: scale(1.5);
}
}
</style>
五、animation-timing-function 动画速度曲线
语法
animation-timing-function: value;
animation-timing-function
使用的数学函数,称为三次贝塞尔曲线,速度曲线。使用此函数,您可以使用您自己的值,或使用预先定义的值之一:
值 | 描述 | 测试 |
---|---|---|
linear | 动画从头到尾的速度是相同的。 | 测试 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 | 测试 |
ease-in | 动画以低速开始。 | 测试 |
ease-out | 动画以低速结束。 | 测试 |
ease-in-out | 动画以低速开始和结束。 | 测试 |
steps(int,start|end) | 指定了时间函数中的间隔数量(步长)。有两个参数,第一个参数指定函数的间隔数,该参数是一个正整数(大于 0)。 第二个参数是可选的,表示动画是从时间段的开头连续还是末尾连续。含义分别如下:start:表示直接开始。end:默认值,表示戛然而止。 | |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
5.1 示例,完整体验时间曲线效果
<ul class="timing-box">
<li>linear</li>
<li>ease</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li>
<li>cubic-bezier(.08,.7,.73,.54)</li>
</ul>
<style>
.timing-box {
list-style: none;
display: flex;
justify-content: space-between;
text-align: center;
}
.timing-box li {
background-color: orange;
width: 100px;
height: 40px;
line-height: 40px;
margin-right: 10px;
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-delay: 1s;
}
li:nth-child(1) {
animation-timing-function: linear;
}
li:nth-child(2) {
animation-timing-function: ease;
}
li:nth-child(3) {
animation-timing-function: ease-in;
}
li:nth-child(4) {
animation-timing-function: ease-out;
}
li:nth-child(5) {
animation-timing-function: ease-in-out;
}
li:nth-child(6) {
white-space: nowrap;
width: 250px;
animation-timing-function: cubic-bezier(.08,.7,.73,.54);
}
@keyframes move {
100% {
transform: translateY(100vh);
}
}
</style>
5.2 示例,步进动画
<ul class="steps-box">
<li>1</li>
<li>2</li>
<li>3</li>
...
<li>8</li>
</ul>
<style>
.steps-box {
margin-top: 100px;
list-style: none;
display: flex;
flex-wrap: wrap;
width: 400px;
height: 200px;
background-color: orange;
}
.steps-box li {
position: relative;
width: 100px;
height: 100px;
border-right: 1px solid #ffffff;
border-top: 1px solid #ffffff;
box-sizing: border-box;
}
.steps-box li:nth-child(1), .steps-box li:nth-child(5) {
border-left: 1px solid #ffffff;
}
.steps-box li:nth-child(n + 5) {
border-bottom: 1px solid #ffffff;
}
.steps-box li:nth-child(1):before,
.steps-box li:nth-child(5):before {
content: "";
width: 98px;
height: 98px;
position: absolute;
z-index: 2;
box-sizing: border-box;
animation-name: move;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.steps-box li:nth-child(1):before {
content: "steps(4, start)";
background-color: orangered;
top: 0;
animation-timing-function: steps(4, start);
}
.steps-box li:nth-child(5):before {
content: "steps(4, end)";
background-color: orchid;
bottom: 0;
animation-timing-function: steps(4, end);
}
@keyframes move {
100% {
transform: translateX(400px);
}
}
</style>
六、animation-play-state 动画播放状态属性
语法
animation-play-state: paused|running;
值 | 描述 | 测试 |
---|---|---|
paused | 指定暂停动画 | 测试 » |
running | 指定正在运行的动画 | 测试 » |
6.1 示例,暂停
<main>
<div class="box"></div>
</main>
<style>
main {
margin-top: 150px;
width: 400px;
height: 400px;
border: 1px solid #ffffff;
}
.box {
width: 100px;
height: 100px;
background-color: orange;
animation-name: myTranslate;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.box:hover {
animation-play-state: paused;
}
@keyframes myTranslate {
25% {
transform: translateX(300px);
}
50% {
transform: translate(300px, 300px);
}
75% {
transform: translateY(300px);
}
}
</style>
6.2 示例,播放
<main>
<div class="box"></div>
</main>
<style>
main {
margin-top: 150px;
width: 400px;
height: 400px;
border: 1px solid #ffffff;
}
.box {
width: 100px;
height: 100px;
background-color: orange;
animation-name: myTranslate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-play-state: paused;
}
.box:hover {
animation-play-state: running;
}
@keyframes myTranslate {
25% {
transform: translateX(300px);
}
50% {
transform: translate(300px, 300px);
}
75% {
transform: translateY(300px);
}
}
</style>
七、animation-fill-mode 动画填充模式属性
animation-fill-mode
属性规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始时),要应用到元素的播放样式。
CSS 语法
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
属性值
值 | 描述 |
---|---|
none | 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 |
forwards | 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。 |
backwards | 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 “normal” 或 “alternate” 时)或 to 关键帧中的值(当 animation-direction 为 “reverse” 或 “alternate-reverse” 时)。 |
both | 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。 |
initial | 设置该属性为它的默认值。请参阅 initial。 |
inherit | 从父元素继承该属性。请参阅 inherit。 |
7.1 示例,停留在动画最后一帧
<main>
<div class="box"></div>
</main>
<style>
main {
margin-top: 150px;
width: 400px;
height: 400px;
border: 1px solid #ffffff;
}
.box {
width: 100px;
height: 100px;
background-color: orange;
animation-name: hj;
animation-duration: 4s;
animation-fill-mode: forwards;
}
@keyframes hj {
25% {
transform: translateX(300px);
}
50% {
transform: translate(300px, 300px);
background-color: orange;
border-radius: 0;
}
75% {
transform: translateY(300px);
}
100% {
transform: translate(0, 0);
background-color: orchid;
}
25%, 75% {
background-color: green;
border-radius: 50%;
}
}
</style>