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

This article is to share with you about the properties of CSS animation. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

One: transition

Transition allows us to add an excessive animation to the CSS property when it changes. Typically, the CSS property change takes effect immediately, the new property value replaces the old property value in an ultra-short period of time, and then the browser redraws the style content (perhaps reflow or repaint). In most cases, you will feel a sudden change in style, while transition can add a smooth change effect. For example:

.content {

Background:magenta

Transition:background200msease-in50ms

}

.content: hover {

Background:yellow

Transition:background200msease-out50ms

}

The compatibility of transition is not poor, basically all mobile devices can be used, and can be gradually enhanced, support will have a transition effect, do not support direct switching, so you can rest assured to use.

Transition attribute

CSS's transition has four properties:

How long will it take for transition-delay to start animation?

A duration of transition-duration transition animation

Transition-property executes the properties corresponding to the animation, such as color,background, etc. You can use all to specify all the attributes

Transition-timing-function over time, animation changes the trajectory of the calculation method, the common are: linear,ease,ease-in,ease-out,cubic-bezier (...) Wait.

These four attributes can be abbreviated as:

.class {

Transition:}

For example, in the previous example, when the .content element hover, the background color changes from magenta to yellow after 50 milliseconds, lasting 200 milliseconds, using ease-out 's algorithm. Note: transition takes effect on the properties of the corresponding selector, for example, transition in .content: hover controls the transition effect from magenta to yellow, while transition in .content controls the change of background color from yellow to magenta when it is not hover.

The value of the all attribute is that it corresponds to all CSS attributes of the element under the selector. No matter where the CSS rule is declared, it is not limited to the same code block.

If you need different attributes to correspond to different effects, you can write:

.demo {

Transition-property:all,border-radius,opacity

Transition-duration:1s,2s,3s

/ * when used in this way, make sure that all is the first, because if all follows, its rules will override the previous attributes * /

}

The none attribute of transition is rarely used and is generally used to remove existing animation effects. None cannot be used with commas to remove animation effects of specific attributes, but can only kill transition directly. If you want to remove specific attribute effects, you can override transition without writing in the attributes you want to remove, or compare trick by setting duration to 0.

Not all CSS properties can add transition effects. For more information, please refer to the document: animatableproperties. What you may often encounter is that the attribute display does not add a transition effect, so you can consider using visibility or the animation mentioned later.

About the change curve of each algorithm of transition-timing-function, we can use the developer tool of chrome to take a look. After you have written the corresponding transition in CSS, move the mouse to the front of the value of transition-timing-function, as shown below:

3.jpg

In this way, you can clearly see how a change track of the algorithm is used, and then choose an algorithm that meets your needs.

Transition related events

The transitionend event is triggered at the end of the transition animation. Usually we perform some methods after the end of the animation, such as moving on to the next animation effect or something else. The animation methods in Zepto.js are handled using the CSS animation attribute, and the callback after the animation is run should be handled with this event.

Some animation-related parameters are passed when the transitionend event is triggered, such as propertyName,elapsedTime. For more information, please see transitionend.

Transition application

Transition is a common attribute in many UI frameworks, and transition can make the process more comfortable and smooth when we develop an interaction, moving from one state to another. For example, the hover above when the background color switch, control elements show and hide when using opacity to achieve fade and fade.

When transition is combined with the variety of element changes provided by transform, you can draw a lot of interesting interactive gradients. For an example of a simple effect done in the recent use process, click to view.

It is very common that the border turns red when the form input reports an error, the background changes gradually when the button hover, etc., and a lot of CSS interactions become more natural because of transition.

Two: animation

Although transition has provided great animation effects, but we can only control from one state to another state, there is no way to control the continuous change of multiple states, and animation has helped us achieve this. The premise of using animation is that we need to use @ keyframes to define an animation effect. The rules defined by @ keyframes can be used to control each state in the animation process. The syntax looks like this:

@ keyframesW {

From {left:0;top:0;}

To {left:100%;top:100%;}

}

The @ keyframes keyword is followed by the name of the animation, followed by a block with each selector for the progress of the animation, and the block after the selector is still our common CSS style attribute.

Here, the selector that controls the whole process of animation is very important, and the syntax is relatively simple. You can use from or 0% to represent the start state, and to or 100% to represent the end state. You can express the middle part as a percentage. The block behind the selector is what the style of the element should be when it reaches this progress state, and the whole transition animation is drawn by the browser based on this control.

Similarly, not all attributes can be animated, and MDN maintains a list of attributes for CSS animation for reference.

Generally speaking, the values of the same attributes in multiple states should be able to take their intermediate values, for example, left ranges from 0% to 100%. If you cannot get the intermediate values, such as height from auto to 100px, strange situations may occur, and different browsers handle this differently, so try to avoid this situation.

Animation attribute

Animation has more attributes than transition, as follows:

Animation-name the name of @ keyframes of the animation you need.

Animation-delay is the same as transition-delay, the time the animation is delayed.

Animtaion-duration, like transition-duration, the duration of the animation.

One direction control of animation-direction animation.

The default is normal, and if the above left ranges from 0% to 100%, the default is from left to right. If this value is reverse, then it is from right to left.

Because animation provides loop control, two other values are alternate and alternate-reverse, which reverse the direction of the animation at the beginning of each loop, but in a different direction.

For example, in the case of left, if animation-direction:alternate;animation-iteration-count:infinite;, is set, then after the element moves from left to right, it turns around, from right to left, and so on.

The animation-fill-mode attribute is used to control how the CSS attribute provided in @ keyframes is applied to the element before and after the animation.

The default value is none, and there are three other options: forwards,backwards,both.

Assuming none, the CSS attributes declared in the animation will not be applied to the element before and after the animation. That is, after the animation effect is executed, the element returns to its normal state.

If it is forwards, then after the end of the animation, the CSS attribute of the final state is applied to the element, that is, the last appearance of the animation is maintained. Backwards, by contrast, both will calculate the final result.

Animation-timing-function, like transition-timing-function, is an algorithm for animating changing trajectories.

The number of animation-iteration-count animation cycles, or unlimited if it is infinite. Interestingly, decimal is supported, that is, 0.5 means that the animation is in the middle of execution.

The state in which an animation-play-state animation is executed, with two values running or paused, which can be used to control whether the animation is executed.

The above attributes can be abbreviated as:

.class {

Animation:}

Slightly longer, of course, some parameters may be omitted in normal use.

What animation needs to pay attention to

1. Priority

Remember the cascading concept in CSS, high-priority attributes override low-priority attributes. When animation is applied to elements, the CSS attribute declared by @ keyframes has the highest priority during animation, which is higher than the style of inline declaration! important. The implementation of the browser now looks like this, but the statement in the standard document should be overridden by the properties declared by! important.

The order of multiple animations

Because animation-name can specify multiple animation effects, there is a problem with the order of animation. The animation specified after will overwrite the previous one, for example:

# colors {

Animation-name:red,green,blue;/* assumes that these keyframe modify the attribute color * /

Animation-duration:5s,4s,3s

}

The above code will animate like this: the first three seconds are blue, then the first second is green, and the last second is red. The whole rule of coverage is relatively simple.

The influence of display

If the display of an element is set to none, the animation on it or its child elements stops, and when the display is reset to visible, the animation starts all over again.

Animation related events

We can listen to several states of animation by binding events, which are:

The animationstart animation start event, if there is a delay attribute, will not be triggered until the animation actually starts. If there is no delay, then this event will be triggered when the animation effect is applied to the element.

The event at the end of the animationend animation, similar to transitionend. If there are multiple animations, then this event will be triggered multiple times, as in the above example, this event will be triggered three times. If animation-iteration-count is set to infinite, then this event will not be triggered.

Animationiteration Animation cycle an event at the end of a life cycle, unlike the previous event, which is triggered at the end of an animation at the end of each loop, not at the end of the entire animation. In an infinite loop, this event will trigger infinitely unless duration is 0.

Thank you for reading! About "what are the attributes of CSS animation" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

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.