CSS Transitions & Animation
In addition to setting the still visual design of website content, CSS has the ability to apply motion to that content for greater interactivity and interest. Transitions allow for smooth animation between two states, while keyframe animations are capable of creating more complex moving visuals.
Transitions
Whenever CSS properties are changed between two states of an element (such as when a link is hovered), the transition property can be used to add a timed transition between those states. Only properties that exist along a continuum (such as a measurement or a color) can be transitioned. Properties with discreet values (such as display or text-decoration) cannot be transitioned.
transition is shorthand for:
transition-property, which determines what properties will be transitioned—the keywordallcan be used to apply the transition to all possible properties.transition-duration, which set the length of time over which the transition occurs, typically expressed in seconds (s) or milliseconds (ms).transition-timing-function, which determines the rate at which the change happens over the given duration, whether that be constant (linear) or gradually speeding up then slowing down (ease). Possible timing function keywords include:linear(the default): A constant speed that doesn't change.ease: Starts slow, speeds up, then slows back down.ease-in: Starts slow, then speeds up.ease-out: Starts fast, then slows down.
transition-delay, which sets an amount of time the browser should wait before performing the transition. Also expressed in seconds or milliseconds.
The order of values for the transition shorthand property is: transition: [transition-property] [transition-duration] [transition-timing-function (optional)] [transition-delay (optional)]
A separate transition must defined for each end state. In the example below, that means we need a transition on the hover state and another on the default state for when the hover ends and the state returns to normal.
In the example above, try removing the transition property from the default state, then try hovering on and off the link in the preview window. Notice how it no longer transitions back to the default state. You can also try playing with which properties transition.
Notice in the above example that all properties transition on hover, but only background-image transitions back when the hover ends.
Keyframe Animation
Keyframes refer to defined points across the duration of an animation. Using keyframe animation, we can achieve far more complex results than with the simple transition property.
There are two steps to creating a keyframe animation. First you define the animation, which can then be invoked and reused on as many selectors as you like.
Defining the Animation
To define a keyframe animation, you set it up using @keyframes and a name of your choice. Then, you set CSS properties at each point (keyframe) along the duration of the animation (usually expressed in percentages) as are necessary for the effect.
In the above example, since the opacity property isn't updated at the 85% value, opacity continues its transition between 0% and 100% as though there were no keyframe between.
Using the Animation
Now that we have defined our animation, we must apply it to a selector using the animation property. animation is a shorthand property for:
animation-name, which references the name given when defining the keyframes. In our example, "example-animation".animation-duration, which, just as withtransition-duration, sets the length of time over which the animation plays. The percentage values given in the keyframe definition are mapped such that 0% occurs at the start of the duration and 100% occurs at the end.animation-timing-function, which, just as withtransition-timing-function, determines the rate at which the animation plays out. Possible timing function keywords include:linear(the default): A constant speed that doesn't change.ease: Starts slow, speeds up, then slows back down.ease-in: Starts slow, then speeds up.ease-out: Starts fast, then slows down.
animation-delay, which can set a delay time before the animation begins.
There are several more advanced properties that can be used for animations, but those listed above cover basic implementation.
In the example above, try changing the animation to have the text cycle through a series of colors. Add more keyframe steps to use more colors.
An animation is triggered as soon as the CSS selector is recognized by the browser. In the example above, it is triggered on hover, but if the animation is applied to a static element the animation is triggered on page load. This can be utilized to create page-entrance animations.
It is also worth noting that you can use multiple animations on a single selector by comma-separating the declarations. This can be utilized in combination with animation-delay to create complex effects.
Video Lesson
The following video demo is fully interactive. You can pause at any time to directly edit the code, and resume playback to restore to where you left off.