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

This article focuses on "analyzing CSS animation Transition and Animation". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "analyzing CSS animation Transition and Animation"!

CSS3 difference transition smoothly changes the attribute value (from one value to another) over a given duration, that is, you only need to specify the start and end parameters, and the animation is triggered when the parameters change.

Triggered by mouse events (: hover, active,: focus,: click) or keyboard input

An event trigger is required and cannot occur automatically when the web page loads. One-time, can not be repeated, unless triggered repeatedly.

Only start and end states can be defined, not intermediate states. Animation can write the changes of each stage at the beginning, the beginning, and the end of the animation, which is suitable for more subtle animation performance. You need to explicitly specify the parameters of the Keyframe (@ keyframe).

When the web page is loaded, it will be executed directly, and you can control the changes of the animation in each stage.

The biggest difference between animation and transition is that transition is triggered when the parameters change, while animation is executed directly, all animation effects need to clearly specify the parameters of the Keyframe.

CSS3 abbreviation order transitionproperty name timing-function special effects animationname name timing-function special effects

Iteration-count times fill-mode fill mode browser supports transition writing. Box {width: 100px; height: 100px; background-color: purple; transition: width 2s ease-in 2s;} .box:hover {width: 200px; height: 200px; background-color: red;} animation writing .box {width: 100px; height: 100px; border: 1px solid # ccc; animation: change 5s / * 8 attributes must have at least a name and time * /} / * set start and end status * / / * from is 0% from is 100%*/@keyframes change {from {background-color: # 4BC0C8;} to {background-color: # C779D0;}}. Box {width: 100px; height: 100px; border: 1px solid # ccc; animation: change 5s / * 8 attributes must have at least a name and time * /} / * set start and end status * / / * from is 0% from is 100%*/@keyframes change {0% {background-color: # 4BC0C8;} 20% {background-color: # C779D0;} 60% {background-color: # FEAC5E;} 80% {background-color: # 185a9d } 100% {background-color: # 4BC0C8 }} the name animation-duration time time after the attribute value animation-name@keyframes is calculated in seconds, for example, the 3s initial preset value inherit inherits the parent layer animation-timing-function special effects linear constant speed, ease, ease-in, ease-out, ease-in-out, step-start, step-end, steps (int,start/end), cubic-bezier (ngraine n) can be used to calculate values on the official website using animation-delay in seconds, such as 2sanimation-iteration-count times number default value is 1, so fill 2: 00 The animation runs 1 "2" 3 times infinite infinite loop animation-direction direction normal, reverse reverse, alternate reverse then positive animation-fill-modeforwards uses the last value of the Keyframe backwards uses the initial value bothanimation-play-state playback state pause pauses running to the default value initial default value, inherit inherits the parent layer

At this point, I believe you have a deeper understanding of "analyzing CSS animation Transition and Animation". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.