How to achieve the effect of not disappearing when the animation ends in css3-Front-end Q&A-php.cn

How to achieve the effect of not disappearing when the animation ends in css3

WBOY

Release： 2022-03-29 17:06:50

Original

2942 people have browsed it

In css3, you can use the "animation-fill-mode" attribute to achieve the effect of not disappearing when the animation ends. This attribute can specify the style of the element when the animation is not played. When the attribute is set to forwards, the animation effect will not disappear. The syntax is "animation-fill-mode:forwards".

How to achieve the effect of not disappearing when the animation ends in css3

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to achieve the effect of not disappearing after the animation ends in css3

The animation-fill-mode attribute stipulates that when the animation does not play (when the animation is completed, or when the animation has a delay and does not start playing), The style to apply to the element.

By default, CSS animations will not affect the element until the first keyframe is played, and stop affecting the element after the last keyframe is completed. The animation-fill-mode property overrides this behavior.

CSS Syntax

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

Copy after login

none Default value. Animation does not apply any styles to the target element before or after the animation is executed.
forwards After the animation ends (determined by animation-iteration-count), the animation will apply this property value.
backwards The animation will apply the property value defined in the keyframe that started the first iteration of the animation during the animation-delay definition. These are values in from keyframes (when animation-direction is "normal" or "alternate" ) or in to keyframes (when animation-direction is "reverse" or "alternate-reverse" ).
Both animations follow the rules of forwards and backwards. That is, the animation expands the animation property in both directions.
initial Sets this property to its default value.
inherit Inherit this property from the parent element.

The example is as follows:

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s;
animation-iteration-count:2;
animation-fill-mode:forwards;
/* Safari 和 Chrome */
-webkit-animation:mymove 3s;
-webkit-animation-iteration-count:2;
-webkit-animation-fill-mode:forwards;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p>
<div></div>
</body>
</html>

Copy after login

Output result:

How to achieve the effect of not disappearing when the animation ends in css3

(Learning video sharing: css video tutorial)

The above is the detailed content of How to achieve the effect of not disappearing when the animation ends in css3. For more information, please follow other related articles on the PHP Chinese website!