CSS In Motion

Motion is the expression of change. It is an enhancement that can attract focus or give visitors contextual clues that their actions are taking effect. By focusing on using animation sparingly and thoughtfully we can guide visitors through complex interactions to achieve their goals.

Purpose of Motion

Always know the intended purpose of any applied motion. If a motion’s purpose can’t be explained then that’s a sign that the motion is probably not needed.

Declares Hierarchy

An object in motion is telling the visitor that it is the most important thing to focus on at that moment. Motion highlights the relationships between interaction objects, interaction availability, and results. Motion helps an element rise in the design heirarchy, and can be more noticable than relationships in size, contrast, or color.

Directs Focus

Even tiny motions will attract attention. We can direct the visitor’s attention to help them accomplish their tasks, or we can distract them and cause frustration.

Provides Feedback

Motion can provide clear feedback in response to visitor actions. A button that changes color when you hover over it is a clear indacator that it can be clicked. A button that changes to a different color when you click it is a clear indication that it has been clicked.

Provides Orientation

Motion with physicality and realism provides benefits by keeping people oriented within the application and calling attention to specific locations on the screen.


Duration should correlate with the size of the change, so that the speed remains relatively consistent. Large objects moving a longer distance should take longer to move. Motions that are too short or quick may look broken and won’t give the visitor enough time to visually absorb the information.

Frame Rates
MediaFrames per SecondFrame Persistence
Early Motion Pictures (Flicks)1283.33ms
Modern Video6016.67ms

About 300ms typically feels responsive and natural without making the visitor wait.

At a frame rate of 12fps, one frame remains visible for about 83.33ms. This is why early films were called flicks. For reference, the duration of a blink of a human eye is about 100ms.

Timing Scale
flickMicro-interactions such as button and toggle83ms
fastMicro-interactions such as fade, fly-outs167ms
moderateMost interactions, expansion, short distance movements334ms
slowLarge expansion, important system notifications667ms
sluggishView changes; Full-screen transitions; Background dimming1334ms

Easing Values


Try to emulate real world gravity, momentum, and velocity so your animation appears familiar and logical.

ease (default)
Will start slowly, be fastest at the middle of the animation, then finish slowly. It starts slightly faster than it ends. In View.
Will start slowly, be fastest at the middle of the animation, then finish slowly. In View.
Will start the animation at full speed, then finish slowly. Entering View.
Will start the animation slowly, and finish at full speed. Exiting View.
Very few objects ease in a linear fashion in the real world.


Without a transition, changes to an element (in color, opacity, location, etc.) may appear jarring and unnatural. You’ll notice in the first color transition, the color snaps from lightgray to silver.

The property to animate.
The duration of the transition
The easing for the transition.
The duration of the delay, if there is one.

transition: property duration timing-function delay;

With no transition
With transition: background-color 300ms ease-in-out

The effect is similar with when you use a transform property to translate the button to the right, though it’s much more jarring.

With no transition

It looks much more natural with just a little transition.

With transition: background-color 300ms ease-in-out, transform 300ms ease-in-out


Three different boxes, all with the same animation, but different animation timeing values.

@keyframes slidein {
  from {
    transform: translateX(0%);

  to {
    transform: translateX(100%);

.box {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: slidein;
  background-color: red;
  height: 100px;
  width: 300px;

@keyframes slideinout {
  0% {
    transform: translateX(0%);

  50% {
    transform: translateX(100%);

  100% {
    transform: translateX(0%);

.box_green {
  background-color: green;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: slideinout;

.box_blue {
  background-color: blue;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-name: slideinout;

Animation Functions


The cubic-bezier function allows you to adjust the easing of an animation.

ease (default) cubic-bezier(.25,.1,.25,1)
enthusiatic cubic-bezier(.5,-0.5,0,1)
lethargic cubic-bezier(1,0,.5,1.5)
clumsy cubic-bezier(.5,-0.5,.5,1.5)
bounce cubic-bezier(1,0,1,1.5)

These are extreme settings to showcase the differences. You might want to go with settings that are a little more subtle for your own sites. The Cubic Bezier web site is an excellent resource to begin working with cubic beziers.