CSS Pseudo Animations

Pseudo Animation is the practice of applying a transition to an element, so that the change from one state to the next, through the use of pseudo classes, will transition over time.

Pseudo Classes and Pseudo Elements

This YouTube video was created by Steve Griffith.

A pseudo class is a keyword added to a selector that specifies a special state of the selected element. An exmaple of a pseudo class is :hover. See a full list of standard pseudo classes.

A pseudo element is a keyword added to a selector that lets you style a specific part of the selected element. An example of a pseudo element is ::first-child. See a full list of standard pseudo elements.

TIP

To help distingush between pseudo classes and pseudo elements, pseudo elements should include two colons (::) before the keyword, while pseudo classes should only use one.

Using Pseudo Classes

Pseudo classes allow for the different styles to be applied to an element when a specific condition is met. For example, the :hover pseudo class will be applied to any element when the mouse cursor is "hovers" over top of the element. In the example below, the :hover pseudo class is applied to the body to change the background color.

NOTE

Not all pseudo classes can be applied to every element. For example the :active pseudo class only applies to <a> and <button> tags, while pseudo classes like :required and :valid only apply to form inputs.

Refer to the pseudo class for more information

Using transitions

In the previous example, the change between normal and hover state occured instantancely. However, by using the transition property that change can occur smoothly over a period of 2 seconds.

In this example, the transition propery is used to change the background from blue to red over a longer period of time.

Animatable Properties

Transitions are not limited to background and color. There are a variety of animatable properties.

In the example below, on hover the box will transition to a larger width and height.

In this example, the opacity property used to create a classic fade.

Timing Functions

Timing functions affect the spend at which a transition at any given time during the duration of the of the transition. It is important to note that timing functions do not affect the duration.

In the example below, the timing function ease-out is applied to the width and the timing function ease-in to the height.

NOTE

Despite having different timing functions both properties finish transitioning at the same time.

Transition Multiple Properties

It is possible to transition multiple properties on a single element. Each of can have their own duration, timig functino and delay.

In the example below, four transitioned boxes that grow in height and width and slowly change color from blue to red on hover.

Working with Delays

The transition-delay property is used to prevent a transition from happening for specific length of time. A delay can be used to transition one property after another.

In the following example, the box's width will expand first completing the full width animation in 0.25s. After a 0.25 seconds delay the height will animates slower.