CSS Animations

References

• CSS Animations MDN Docs
• Using CSS Animations MDN Docs

Related

• Composite Operation
• • In CSS, the value of a property in a CSS rule is the underlying value of that property, and the value of that same property in a keyframe is its effect value.
  • Composite operation is the specific operation that is used to combine an effect value with an underlying value to produce the final keyframe effect value. There are three types of composite operations:

1. 1. 1. replace: The effect value replaces the underlying value. The final effect value in this case is the original effect value itself.
      2. add: The effect value is added to the underlying value.
      3. accumulate: The effect value is combined with the underlying value.

• Keyframe
• • The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions. You can list the keyframes percentages in any order; they will be handled in the order they should occur. If multiple keyframe sets exist for a given name, the last one encountered by the parser is used. Properties that aren't specified in every keyframe are interpolated if possible - properties that can't be interpolated are dropped from the animation. Declarations in a keyframe qualified with !important are ignored.

@keyframes slide-in {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

• • Values:
  • • from
    • • A starting offset of 0%
    • to
    • • An ending offset of 100%
    • <percentage>
    • • A percentage of the time through the animation sequence at which the specified keyframe should occur.
    • <timeline-range-name> <percentage>
    • • A percentage of the time through the specified animation-range at which the specified keyframe should occur.
• At-rules
• • At-rules are CSS statements that instruct CSS how to behave. They begin with an at sign, @, followed by an identifier, and include everything up to the next semicolon, ;, or the next CSS block, whichever comes first.
• CSS Declaration Block
• • Declarations re grouped in blocks, that is in a structure delimited by an opening brace, {, and a closing one, }. Blocks sometimes can be nested, so opening and closing braces must be matched. Such blocks are naturally considered declaration blocks and declarations inside them are separated by a semicolon, ;.

Notes

The CSS animations module lets you animate the values of CSS properties, such as background-position and transform, over time and by using keyframes. Each keyframe describes how the animated element should render at a given time during the animation sequence. You can use the properties in the animations module to control the duration, number of repetitions, delayed start, and other aspects of an animation.

Properties

• animation shorthand

/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slide-in;
/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slide-in;
/* two animations */
animation: 3s linear slide-in, 3s ease-out 5s slide-out;

• animation-composition
• • Species the composite operation to use when multiple animations affect the same property simultaneously.
• animation-delay
• • Specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.
• animation-direction
• • Property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.
• animation-duration
• • Sets the length of time that an animation takes to complete one cycle.
• animation-fill-mode
• • Property sets how a CSS animation applies styles to its target before and after its execution.
• animation-iteration-count
• • Property sets the number of times an animation sequence should play before stopping.
• animation-name
• • Specifies the name of one or more @keyframes at-rules that describe the animation to apply to an element. Multiple @key-frame at-rules are specified as comma-separated list of names. If the specified name does not match any @key-frame at-rule, no properties are animated.
• animation-play-state
• • The property sets whether an animation is running or paused.
• animation-timing-function
• • Property sets how an animation progresses through the duration of each cycle.

At-Rules

• @keyframes
• • See above.

Events

• animationstart
• • Event fired when a CSS Animation has started. If there is an animation-delay, this event will fire once the delay period has expired. A negative value will cause the event to fire with an elapsedTime equal to the absolute value of the delay.
• animationend
• • The animationend event is fired when a CSS Animation has completed. If the animation aborts before reaching completion, such as if the element is removed from the DOM or the animation is removed from the element, the animationend event is not fired.
• animationcancel
• • The nimationcancel event is fired when a CSS Animation unexpectedly aborts. In other words, any time it stops running without sending an animationend event. This might happen when the animation-name is changed such that the animation is removed, or when the animation node is hidden using CSS.
• animationiteration
• • This event is fired when an iteration of a CSS Animation ends, and another one begins. This event does not occur at the same time as the animationend event, and therefore does not occur for animations with an animation-iteration-count of one.

There are three key advantages to CSS animations over traditional script-driven animation techniques:

1. They're easy to use for simple animations; you can create them without even having to know JavaScript
2. The animations run well, even under moderate system load.
3. Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.