Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "css3 how to achieve the end of animation does not disappear effect", the content is detailed, the steps are clear, the details are handled properly, I hope that this "css3 how to achieve animation end does not disappear effect" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

In css3, you can use the "animation-fill-mode" attribute to achieve the effect that does not disappear at the end of the animation, which can specify the style of the element when the animation is not played. When the attribute is set to forwards, the animation effect does not disappear, and the syntax is "animation-fill-mode:forwards".

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

How to achieve the effect of ending Animation without disappearing with css3

The animation-fill-mode property specifies the style to be applied to the element when the animation is not played (when the animation is complete, or when the animation has a delay that does not start playing).

By default, CSS animation does not affect the element until the first Keyframe is played, and stops affecting the element after the last Keyframe is completed. The animation-fill-mode property overrides the behavior.

CSS syntax

Animation-fill-mode: none | forwards | backwards | both | initial | inherit

None default value. Animation does not apply any styles to the target element before and after the execution of the animation.

Forwards after the end of the animation (determined by animation-iteration-count), the animation applies this attribute value.

The backwards animation applies the attribute values defined in the keyframes that start the first iteration of the animation during the animation-delay definition. These are the values in from keyframes (when animation-direction is "normal" or "alternate") or to keyframes (when animation-direction is "reverse" or "alternate-reverse").

Both animation follows the rules of forwards and backwards. That is, the animation expands the animation attributes in both directions.

Initial sets this property to its default value.

Inherit inherits this attribute from the parent element.

Examples are as follows:

123 div {width:100px;height:100px;background:red;position:relative;animation:mymove 3s top:200px;} @ keyframes mymove {top:0px;} to {top:200px;} @-webkit-keyframes mymove / * Safari and Chrome * / {from {top:0px;} to {top:200px;}

Note: the animation-fill-mode attribute is not supported in Internet Explorer 9 and previous versions.

Output result:

Read this, the "css3 how to achieve the end of animation does not disappear" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.