Drawing attention

Motion can be used to lead the user’s eye and direct attention to changes and important elements.

In this task, we'll use an animation on the page to draw the user’s attention.

Part 1.1 Adding a :hover transition

To start out, let’s create a :hover transition for when we hover over the ‘.add-reminder’ button (the big plus symbol).

For this example, we want the button to get big when the user hovers over it.

Before we code our animation, we should think about the element we will be altering and sketch it out.

Image

Let's try adding this grow effect to our button, using a transform

button.add-reminder:hover {
  transform: scale(1.1);
}

Looks great! But you may notice that the transform doesn't occur when the mouse leaves the button.

To fix this, we apply a transition to the parent element

button.add-reminder {
  transition: transform 1s;
}

Part 1.2 Adding an inital animation

While we’re at it, let’s draw the user’s attention to the ‘.add-reminder’ button as the primary action when they first visit the page.

We can use an animation to load in the button and draw the user’s attention.

First I create my keyframes

@keyframes button-animation {
  from {
    transform: scale(0);
  }
  30% {
    transform: scale(1.2);
  }
  to {
    transform: scale(1);
  }
}

Then I apply it to my button element

button.add-reminder {
  animation: button-animation 1s;
}