Storytelling

Now that we’ve covered both the transition and animation property, let’s combine both into an animation with a hover effect.

Heroes

Many sites like to make use of a large, attention-grabbing image at the top of their homepage. Sometimes called a “hero image”, this is usually a full-width banner style element.

A nice example I found recently was the Fabric landing page. A CSS animatiom shows how Fabric works as a modular framework.

Another interesting example is the Mailchimp homepage. Here the hero image tells a story by demonstrating how emails are created.

You may have also seen it in action on my CSS Animation 101 email course landing page:

In each of these examples, they use animation to set the tone of the page and illustrate what the site is about.

Example: Scrolling background

Let’s create an example of our own. In this example I’ve created a “web page” style graphic that moves up and down the screen.

For a bit of interactivity, the animation pauses and a message is shown when a mouse cursor hovers over the screen. It makes use of both animations and transitions to achieve this effect.

See it in action here.

Part 1: Background animation

To set up this example we begin with the HTML element to contain it:

<div class="screen"></div>

We can make the “screen” div look like a monitor or iPad using some styles:

.screen {
  background: #e25865 url(//cssanimation.rocks/screen/images/screen_bg.png) no-repeat top center;
  background-size: 100% auto;
  border: 2em solid #fff;
  border-radius: 1em;
  width: 40em;
  height: 30em;
}

We have some styles here defining the size and border, and setting a background image.

The effect we’re creating is based on moving a background image. The background image is taller than the screen and has a background-size of 100% auto. This means the background will fit the width of our container but be taller.

With a background image to animate, we can now write the keyframes that make it look like someone is scrolling a web page:

@keyframes scroll {
  0%, 10% {
    background-position: 0 0;
  }
  20%, 30% {
    background-position: 0 -22em;
  }
  50%, 60% {
    background-position: 0 -44em;
  }
  90%, 100% {
    background-position: 0 0;
  }
}

The property we’re animating is background-position. With this property we can move it up and down. It begins at 0 0, which means zero distance from the left, and zero from the top.

In the next frames we have the background move 22 ems up, then 44 ems up, then return to the top of the page. Let’s create an animation property to apply this to the “screen” element.

.screen {
  animation: scroll 5s infinite cubic-bezier(.52,-0.39,.3,1.43);
}

This CSS is applying the a set of keyframes called “scroll”, telling it to take 5 seconds, run forever and use a cubic-bezier timing function. In this case the cubic bezier function gives the animation the bounciness as without it the movement would look less lifelike.

I generated this bezier over on cubic-bezier.com. If you haven’t bookmarked that site yet, I’d absolutely recommend you do!

Part 2: Adding the hover transition

It’s a good idea to pause or stop an animation once it’s finished or when you want people to concentrate on something else. Constant animation can be distracting, so let’s make use of animation-play-state to pause the animation when on hover.

.screen:hover {
  animation-play-state: paused;
}

This means that when a cursor hovers over the animation, it will pause. And when the cursor moves away again, it will resume its default playing state.

You can achieve this with JavaScript also. One possibility is to have some JavaScript disable the animation when the user interacts with another part of the page, or perhaps when they scroll away. We’ll take a look at how to enable animations on scroll later.

Adding a message

We can also go further and have a message transition into place when a user hovers over the element. To do this we’ll need a little more HTML:

<div class="screen">
  <div class="message">Hover message!</div>
</div>

In the CodePen CSS we position this message in the middle of the “screen” and make it invisible.

.message {
  /*... positioning styles ...*/
  opacity: 0;
  transition: all 0.4s ease-out;
}

We can then show it on hover using a transition:

.screen:hover .message {
  opacity: 1;
}

Since we set a transition on the “message” styling, it creates the animation both when the cursor hovers over the element and when it leaves. The paused animation and transition effects look like this:

Summary

In this chapter we combined both an animation and a transition to create an effect that could be useful for landing pages and product tours. We made use of the animation-play-state to make sure the animation stopped when we wanted it to.

Homework

Take a moment to think about what we’ve covered so far.

We covered a lot. Combining animations and transitions is a powerful way to bring pages to life.

When thinking about how this can apply to your work, think about how it might be controlled too. When might animation work for your users’ benefit, and when might it work against it? It’s great to know how to animate but even better to know when not to.