如何保持 CSS3 动画的结束状态？

2025年1月30日 | 阅读 5 分钟

CSS3 动画由用于网页样式和设计的关键帧组成。animation 属性有不同的样式来动画化元素，使其通过必需的属性进行动画。css3 动画用于在网页上显示动画功能。css 动画在完成周期后会恢复到原始状态，并保持到结束状态。

除非您采取措施进行保存，否则 CSS3 在动画完成后会将元素恢复到其初始状态或样式。animation-fill-mode 属性指定元素在动画开始和停止时间之前、之后或两者上的样式。

如何着手

"animation-fill-mode" 属性可以在动画结束后使元素保持其最终状态。CSS 样式在动画之前和之后都会应用于元素。"animation-fill-mode" 属性控制动画的播放。
"animation-fill-mode" 属性的默认值为 "none"，这意味着动画完成后，元素将恢复到其初始状态。我们可以通过将其更改为其他可能值之一（例如 "forwards" 值）来更改属性以修改动画行为。
当 "animation-fill-mode" 设置为 "forwards" 时，动画结束后元素将保留最后一个关键帧的值。该元素用于有效地“冻结”在其最终位置。它允许最后一帧的设计应用，直到元素被动画化或以其他方式更改。

"animation-fill-mode" 属性

"animation-fill-mode" 属性有四种可能的值：

None： 这是动画的标准设置。元素在动画之前和之后都保留其初始样式。
Forwards： 动画结束后，元素将保留最后一个关键帧的计算值。
Backward： 在整个动画过程中，元素将采用初始关键帧中指定的样式。
Both： 动画结束后，元素将采用第一个和最后一个关键帧的计算值中指定的样式。
您必须将 "animation-fill-mode" 设置为 animation 属性的一个值，以满足用户需求。

语法

以下语法用于保持 CSS3 动画的结束状态。

 
elements {
     animation-name: my-animation;
     animation-duration: 2s;
     /* set the value: none/forward/backward / both */
     animation-fill-mode: forwards ;
}   

描述

"my-element" 类将 "animation-fill-mode" 属性设置为 "forwards"。
它使用两秒钟的 "my-animation" 动画来保留动画的最终状态。

示例

以下示例展示了 CSS3 动画及其结束状态维护的使用。

示例 1

css3 动画使用带有 none 值的 animation-fill-mode 属性。css 动画在结束状态维护操作中用于应用动画属性并恢复到原始状态。

 
<!DOCTYPE html>
<html>
<head>
<title> How to maintain the end state of a CSS3 animation </title>
<style>
.class1{
font-size:20px;
animation-name: my-animations;
animation-duration: 6s;
animation-fill-mode: none;
}
h2{
color : red;
font-family : Verdana, Geneva, Tahoma, sans-serif;
}

@keyframes my-animations {
0% {
color: red;
}
25% {
color: blue;
}
50% {
color: green;
}
75% {
color: grey;
}
100% {
color: pink;
}
}
</style>
</head>
<body>
<h2 id = "id1">JavaTpoint Website </h2>
<h3> How to maintain the end state of a CSS3 animation </h3>
<p class = "class1">
CSS3 reverts the element to its initial state or style once the animation is finished unless you take action to preserve it.
</p>
</body>
</html>   

输出

输出显示了 css 动画在结束状态。

How do You Maintain the End State of a CSS3 Animation?

示例 2

css3 动画使用带有 forward 值的 animation-fill-mode 属性。css 动画在结束状态维护操作中用于应用动画属性并保持动画效果。元素在动画输出时保留了前一个关键帧的样式设置。

 
<!DOCTYPE html>
<html>
<head>
<title> How to maintain the end state of a CSS3 animation </title>
<style>
#id1{
font-size:40px;
animation-name: my-animations;
animation-duration: 6s;
animation-fill-mode: forward;
}
h3{
color : red;
font-family : Verdana, Geneva, Tahoma, sans-serif;
}

@keyframes my-animations {
0% {
color: red;
}
25% {
color: blue;
}
50% {
color: green;
}
75% {
color: grey;
}
100% {
color: pink;
}
}
</style>
</head>
<body>
<h2 id = "id1">JavaTpoint Website </h2>
<h3> How to maintain the end state of a CSS3 animation </h3>
<p class = "class1">
CSS3 reverts the element to its initial state or style once the animation is finished unless you take action to preserve it.
</p>
</body>
</html>   

输出

输出显示了 css 动画在结束状态。

示例 3

CSS3 动画使用带有 both 值的 animation-fill-mode 属性。css 动画在结束状态维护操作中用于应用动画属性。

 
<!DOCTYPE html>
<html>
<head>
<title> How to maintain the end state of a CSS3 animation </title>
<style>
.my-element {
display: flex;
position: absolute;
width: 450px;
height: 210px;
align-items: center;
justify-content: center;
background-color: almond;
position: relative;
animation-name: my-animation;
animation-duration: 4s;
animation-fill-mode: both;
}
p {
position: absolute;
color: yellow;
border: 2px solid black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: grey;
}

@keyframes my-animation {
25% {
width: 500px;
height: 420px;
background-color: pink;
}
50% {
width: 360px;
height: 390px;
background-color: aqua;
}
100% {
width: 450px;
height: 220px;
background-color: orange;
}
}
</style>
</head>
<body>
<h2 id = "id1">JavaTpoint Website </h2>
<div class = "my-element">
<p class = "class1">
CSS3 reverts the element to its initial state or style once the animation is finished unless you take action to preserve it.
</p>
</div>
<h3> How to maintain the end state of a CSS3 animation </h3>
</body>
</html>   

输出

输出显示了 css 动画在结束状态。

示例 4

css3 动画使用带有 backward 值的 animation-fill-mode 属性。css 动画在结束状态维护操作中用于应用动画属性并保持动画效果。元素在动画输出时保留了前一个关键帧的样式设置。

 
 <!DOCTYPE html>
<html>
<head>
<title> How to maintain the end state of a CSS3 animation </title>
<style>
body{
background-color: beige;
}
.my-element {
display: flex;
position: absolute;
width: 200px;
height: 200px;
align-items: center;
justify-content: center;
background-color: almond;
position: relative;
animation-name: my-animation;
animation-duration: 4s;
animation-fill-mode: backward;
}
p {
position: absolute;
color: yellow;
border: 2px solid black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: grey;
}

@keyframes my-animation {
25% {
width: 500px;
height: 420px;
background-color: pink;
}
50% {
width: 360px;
height: 390px;
background-color: aqua;
}
100% {
width: 450px;
height: 220px;
background-color: orange;
}
}
</style>
</head>
<body>
<h2 id = "id1">JavaTpoint Website </h2>
<h3> How to maintain the end state of a CSS3 animation </h3>
<div class = "my-element">
<p class = "class1">
CSS3 reverts the element to its initial state or style once the animation is finished unless you take action to preserve it.
</p>
</div>
</body>
</html>  

输出

输出显示了 css 动画在结束状态。

浏览器支持

指定第一个完全支持该属性的浏览器版本。

后面带有 -Moz-、-webkit- 或 -o- 的是使用前缀 animation-fill-mode 的第一个版本。

Internet Explorer
Chrome 浏览器
Safari 浏览器
Opera 浏览器

结论

CSS 动画之所以能够在结束状态下保持，是因为有一个简单的属性 css-animation-fill。该属性有助于通过方向值来保持结束状态。

下一主题如何增加或减小复选框大小

如何保持 CSS3 动画的结束状态？

如何着手

"animation-fill-mode" 属性

语法

示例

浏览器支持

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

如何保持 CSS3 动画的结束状态？

如何着手

"animation-fill-mode" 属性

语法

示例

浏览器支持

结论

相关帖子

CSS Override

CSS vs CSS3

CSS Shapes

CSS Display Inline

Cursive Font in CSS

Creating Neumorphic Designs with CSS

CSS Margin-left

CSS Align Self

CSS Profile Login

FreeCodeCamp HTML CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器