CSS In Motion

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.

Timing

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.

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.

Easing Values

transition-timing-function

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.

ease-in-out

Will start slowly, be fastest at the middle of the animation, then finish slowly. In View.

ease-out

Will start the animation at full speed, then finish slowly. Entering View.

ease-in

Will start the animation slowly, and finish at full speed. Exiting View.

linear

Very few objects ease in a linear fashion in the real world.

Transitions

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.

transition-property

The property to animate.

transition-duration

The duration of the transition

transition-timing-function

The easing for the transition.

transition-delay

The duration of the delay, if there is one.

transition: property duration timing-function delay;

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

It looks much more natural with just a little transition.

Keyframes

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

cubic-bezier()

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

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.