Transitions

We can change the state (e.g. color, size, position, etc.) of an element by dynamically modifying the element/s CSS properties.  For example, when we mouse over the button below, its color changes from orange to blue.

We get this effect using the following HTML and CSS code.

<div id="orangeButton" class="button"></div>
.button {
    display: inline-block;
    padding: 20px; 
    border-radius: 20px;
}
#orangeButton {
    background-color: darkorange; 
}
#orangeButton:hover {
    background-color: mediumblue;
}

The transition property allows us to control the duration, timing function and delay of the transition from one state to another.  For example from orange to blue.

Hover over the button below. Wait for it. Notice the difference. There is a 1/2 second delay before the button begins changing color and when it does, it takes 2 seconds to fully change color. The rate at which it changes is controlled by an timing function, here we ease in and out of the transition from blue to orange.

We get this effect using the following HTML and CSS code.

<div id="blueButton" class="button"></div>
#blueButton {
    background-color: mediumblue; 
    transition: background-color 2s ease-in-out 0.5s;
}
#blueButton:hover {
    background-color: green;
}

If the new state is defined by multiple properties the all property can be used to transition all properties to the new state.

We get this effect using the following HTML and CSS code.

<div id="greenButton" class="button"></div>
#greenButton {
    background-color: green; 
    transition: all 2s ease-in-out 0.5s;
}
#greenButton:hover {
    background-color: purple;
    padding-right: 100px;
}

There are a few variations on the values for the transition property.  See the transition documentation for details.

Animatable Properties

Not all CSS properties are animatable using transitions.  A complete list can be found here.

Transforms

CSS transforms allow us to apply rotation, skewing, and scaling transformations to an HTML element in both the 2D plane and in 3D space.

The two main transform properties that we’ll use are transform-origin and transform.

The transform-origin property allows us to move the origin of the element which is used by various transforms.  For example we can rotate an element about the x-axis that runs through the origin.   By default the origin is set to the center of the element.

The transform property specifies one or more transforms to apply to the element.  The transforms that we can perform on elements are:

  • translate (move horizontally and vertically)
  • scale (make an element larger or smaller)
  • rotate (rotate the element about the x, y or z axis)
  • skew (deform the element)

See the transform documentation for details.

Example 1

In the example below, we rotate the button about the Y axis when the mouse hovers over the element. We do this in conjunction with the transition property so that the state change occurs over a 2 second interval.  Notice that the button returns to its original state (via a reverse rotations) when the mouse navigates off of the button.

 <div id="purpleButton" class="button"></div>
.button { 
    display: inline-block; 
    padding: 20px; 
    border-radius: 20px; 
}
#purpleButton {
    background-color: purple; 
    transition: all 2s;
}
#purpleButton:hover {
    transform: rotateY(360deg);
}

Example 2

In this example we translate a button along the x-axis.

 <div id="yellowButton" class="button"></div>
.yellow { 
    display: inline-block; 
    padding: 20px; 
    border-radius: 20px; 
}
#yellowButton {
    background-color: yellowgreen; 
    transition: all 2s;
}
#yellowButton:hover {
    transform: translatex(400px);
}

Animations

This tutorial is based on the mozilla CSS animation tutorial.

A CSS animation transitions an element through a series of states.  In other words it performs a series of transitions.

To create an animation we define a set of keyframes (in a @keyframes at-rule) each defining a state.  When the animation is triggered, the element transitions between the states defined by the keyframes.  We must also set the animation property for the element to specify the keyframes to use, the duration, a timing function and other values.

Example

Animations can be applied to any element and can be triggered when the element loads as is the case in the example below.  Below, the text within a p element is initially offscreen with its margin-left property set to 100%.  When the element loads an animation begins which decreases the margin-left property to 0.

Slide in from the right

The HTML for the element looks like this.  Here we set the font color to blue and set the duration of the animation and set the name of keyframe at-rule to use using the animation property.

p {
    color: blue;
    animation: 3s slide-right-to-left;
}

The keyframes at-rule for this animation is shown below.

@keyframes slide-right-to-left {
  0% {
    margin-left: 100%;
    width: max-content; 
  }
  100% {
    margin-left: 0%;
  }
}

The first keyframe (from) sets its left side margin at the 100% point of the viewport (i.e. its right edge). The last keyframe (to) sets its left side margin at the 0% point of the viewpoint (i.e. its left edge).   When the animation occurs the browser automatically transitions the style of the element from the style defined in the first keyframe to the style defined in the last keyframe.

You can specify additional keyframes as sell, so that the animation transitions between more than 2 states.  To do so, simply add keyframes with keyframe lables between 0 and 100 percent.

Since 0% and 100% are so important, they are given aliases, from and to respectively which you can use in place of 0% and 100%.

The animation Properties

The animation property can specify 1 or more of the 8 different timing properties.

animation: duration  timing-function  delay  iteration-count  direction  fill-mode  play-state  name;
duration
  • the length of time to complete one animation cycle
  • default value: 0s (seconds)
  • other values: #ms (milliseconds)
  • see animation-duration
timing-function
  • the rate at which the animation occurs
  • default value: ease
  • other values: linear, ease-in, ease-out, ease-in-out, step-start, step-end, and function values
  • see animation-timing-function
delay
  • the time between when the element is loaded and the start of the animation
  • default: 0s
  • other values: #ms (milliseconds)
  • see animation-delay
iteration-count
  • the number of times the animation should complete
  • default value: 1
  • other values: infinite, any positive or negative number including real numbers
  • see animation-iteration-count
direction
  • where the animation should restart
  • default value: normal (i.e. forward)
  • other values: reverse, alternate, alternate-reverse
  • see animation-direction
fill-mode
  • the style used after the animation plays
  • default value: none
  • other values: forwards, backwards, both
  • see animation-fill-mode
play-state
  • whether the animation is running or paused
  • default value: running
  • other values: paused
  • see animation-play-state
name
  • the name of a @keyframes at-rule
  • default value: none
  • other values: name of @keyframes at-rule
  • see animation-name