CSS Apps: Animations

CSS transitions provide a way to dynamically change CSS property values, but transitions in the animation process provide little control to the user.

Using animation, the user can control the animation process well by setting a set of keyframe. The way the animation changes the value of a CSS property is similar to the transition, where the fundamental difference is that the transition is triggered when the property value changes, and the animation is executed when the animation property is applied. Therefore, the animation needs to specify an animation effect, which is specified in Keyframe.

CSS Animations

The CSS animation affects the value of the property, and during the animation, the property value is controlled by the animation, and the animated value overrides all property values except those that use the!important tag.

If there are multiple animations at the same time acting on an attribute, the last specified animation takes effect.

The value of the property is not affected until the animation is applied, before the animation's delay time arrives, and after the animation ends.

Shows how the attribute values are computed, and the native style (intrinsic style) is shown on top of the graph, when the animation is not running or is in a delay, the native style is used, during the animation, the property values are calculated using animations.

The animation begins execution after the specified animation's style is resolved and the document's Load event is advertised. Therefore, animations that you specify in a document style sheet will begin after the document is loaded, and animations specified after the document is modified by modifying the style will begin after the style is parsed, such as hover.

Once the animation starts, it runs until the end, or the animation is removed, and the properties that change the animation while the animation is running will have no effect. If you want to restart an animation, you need to remove it and reload it.

Setting the property display to none terminates any running animations, and if an element's display property is none, updating that property to a value other than none will trigger all animations.

The animated frame

Animation frame is used to specify the dynamic properties of the animation at each point. In CSS, you use @keyframes to specify the behavior of a cycle of animation, @keyframes rules are defined as follows:

@keyframes Mymove {from {top:0px;} to {top:200px;}} The

@keyframes is a keyword, mymove specifies the name of the animation, and the selector is defined below. The selector defines the process of animation execution, which can be specified by a percentage, or using the keyword "from" and "to", the "from" equivalent to 0%, and "to" equivalent to 100%. The example above shows the use of "from" and "to", and the following is a scenario with percentages:

@keyframes wobble {0% {left:100px;} 40% {left:150px;} 60% {left:75px;} 100% {left:100px;}}

Note that the specified percentage must be "%", otherwise it is not valid.

If "0%" or "from" is not specified, then the user agent constructs a "0%" value that is calculated dynamically when the animation starts. If "100%" or "to" is not specified, then the user agent constructs a "100%", using the property to dynamically calculate the value. If a negative percent value or a value greater than 100% is specified, the value is ignored. The definition block of the

Selector consists of properties and values, and properties that cannot be animated are ignored. In addition, attributes with!important are ignored. The @keyframes rules configured by

are sorted, and if duplicates exist, the last one takes effect, and the @keyframes rule is not cascading, so an animation will only correspond to one @keyframes rule.

In order to determine a set of animated frames, all values of the selector are sorted by time, and if there are duplicates, the last defined frame is used to provide information at that point in time.

If an attribute is not specified in an animation frame, or if the specified is not valid, the animated process ignores the animation frame. A frame can specify multiple properties, but the animation for each property is done independently.

Back to the example above wobble, four animation frames are specified. In the first frame, the value of the ' left ' property is 100px, to 40%, ' left ' is evolving to 150px, at 60%, ' left ' has evolved to 75px, at the end of the animation, ' left ' is 100px. Here's how the animation actually works:

Time function

An animation frame can also specify a time function that describes how the animation moves to the next animation frame. For a description of the time function, see transition time function. Here is an example of using a time function in an animation:

@keyframes Bounce {from {top:100px;animation-timing-function:ease-out;} 25% {top:50px;animation-timing-function:ease-in;} 50% {top:100px;animation-timing-function:ease-out;} 75% {top:75px;animation-timing-function:ease-in;} to {top:100px;}

The time function specified in the ' to ' or 100% animation frame will be ignored.

Animation-name Property

The Animation-name property defines a list of animated names that are applied. If the defined name does not match any animations, the animation will not execute. Also, if the animation name is ' None ', that is, there is no animation, which can be used to overwrite the previous animation settings. If more than one animation attempts to modify the same property, the last animation of the list is adopted.

Because the animation name is a list, if the length of the list is not equal to the length of the list of other properties (described below), the animated name list will prevail, the properties beyond the length of the animated name list are ignored, and if the length is insufficient, the value of the property is reused until the length of the animated name list is satisfied.

Animation-name: <single-animation-name> [', ' <single-animation-name>]* initial value: None Animation-duration Property

The Animation-duration property defines the length of time, in seconds, of the animation.

Animation-duration: <time> [, <time>]* initial value: 0s

The initial value "0s" means that the animation does not take time, and Animation-fill-mode will still be applied, in which case the animation will show the value of the 0% animation frame in the delay period, and after the end of the delay, the value of the 100% animation frame will be displayed directly. Negative values will be considered illegal.

Animation-timing-function Property

Specify the time function of the animation, and look at the ' Transition-timing-function property '.

Animation-timing-function: <single-timing-function> [', ' <single-timing-function>]* initial value: Ease

All valid time functions are defined in ' transition-timing-function '.

For an animation, the time function is applied between two animation frames and does not overwrite the entire animation.

Animation-iteration-count Property

The Animation-iteration-count property specifies the number of times the animation has been run. The initial value is 1, and the animation is executed only 1 times; the value ' infinite ' indicates that the animation has been executed repeatedly; a number that is not an integer will cause the animation to run to the middle part; negative values are invalid. This property is often used with the ' alternate ' value of the Animation-direction property (described below).

Animation-iteration-count: <single-animation-iteration-count> [', ' <single-animation-iteration-count> ]* Initial value: 1 Animation-direction Property

The Animation-direction property defines whether the animation should run in reverse, and the time function reverses when the animation runs in reverse. For example, the Ease-out effect occurs when you run the Ease-in animation in reverse.

Animation-direction: <single-animation-direction> [', ' <single-animation-direction>]* initial value: normal

The supported property values are:

Normal	Animations run in the specified way
Reverse	Animations run backwards in the specified direction
Alternate	Animations run at odd times and run backwards in an even number of runs
Alternate-reverse	Animations run in reverse at odd times and run in a few runs

Animation-play-state Property

The Animation-play-state property defines whether the animation runs or stops. A running animation can stop it by setting the property to ' paused '. In order to continue running the animation, you need to reset the property to ' running '. A stopped animation will continue to show the current value of the display animation, and when the stopped animation is resumed, it restarts from the current value, not from the beginning of the animation.

Animation-play-state: <single-animation-play-state> [', ' <single-animation-play-state>]* initial value: Running The Animation-delay Property

Animation-delay property defines when the animation begins. The Animation-delay property value of 0s means that the animation is executed immediately after the app is applied, otherwise the animation is applied after the specified time is deferred.

If a negative number is specified for the property, the animation executes immediately after it is applied, but executes at the specified negative offset (from the middle of the animation).

Animation-delay: <time> [, <time>]* initial value: Running The Animation-fill-mode Property

Animation-fill-mode property defines what values are applied outside of the time the animation is executed. By default, an animation will not affect the time it was applied (the Animation-name property is set to the element) and the value of the attribute during the time he was executed (as determined by the Animation-delay property); The animation does not affect the property value after his execution (determined by the Animation-duration property). The Animation-fill-mode property is capable of re-specifying these behaviors.

If the value of Animation-fill-mode is ' backwards ', during the delay defined by Animation-delay, the animation sets the property value to the property value of the first animation frame, which may be ' from ' The value of the animation frame (when Animation-direction is set to normal or alternate), or ' to ' The value of the animation frame (when Animation-direction is set to reverse or alternate-reverse).

If the Animation-fill-mode property value is ' forwards ', then after the animation is finished (as determined by the Animation-iteration-count property), the animation sets the attribute value to the property value at the end of the animation. When Animation-iteration-count is an integer greater than 0, the value is the value after the animation completes, and when Animation-iteration-count is 0, the value is the value at the beginning of the animation.

If the Animation-fill-mode property value is ' Both ', then the animation applies both the ' backwards ' and ' forwards ' rules.

Animation-fill-mode: <single-animation-fill-mode> [', ' <single-animation-fill-mode>]* initial value: None The animation shorthand Property

Animation property is a comma-delimited list of animation definitions.

Animation: <single-animation> [', ' <single-animation>]*<single-animation> = < single-animation-name> | | <time> | | <single-animation-timing-function> | | <time> | | <single-animation-iteration-count> | | <single-animation-direction> | | <single-animation-fill-mode> | | <single-animation-play-state>

Note the order of individual animation definitions is important: the first defined time <time> is used as a animation-duration, the second defines the time < Time> as Animation-delay.

JavaScript events

In the life cycle of an animation, CSS animations define 3 JavaScript events:

Animationstart

Appears at the beginning of the animation, if the animation delay time is set, then the event will be notified after the delay time arrives. A negative delay time causes the event to be notified after the absolute time of the wait delay time.

Animationend

Notification after the event is completed.

Animationiteration

Occurs at the end of each animation iteration, but if the Animationend event occurs, the Animationiteration event is no longer notified, which means that the event will not occur if the animation has been iterated less than once.

You can listen to an animated event like any other JavaScript event, here's an example:

Element.addeventlistener ("Animationstart", function () {Window.alert ("Animation started!")}); instance @keyframes transform {from {transform:rotate (0deg);} 50% {transform:rotate (180deg);} to {transform:rotate (360deg);}} Animation:transform 30s Infinite;

CSS Apps: Animations