Animation

Learn the two primary methods of animating elements with CSS.

Next video loading... 5
Get Code

Transcript

Our site is nearly complete. There's a couple more things we can do to add a bit more polish to our final design. We'll be adding our rocket logo into our header and animating both it and this bit of copy.

The first thing we can do in our index file is add our logo image which will be placed directly above our <h1>.

So in our img tag we'll set our src to img/logo.svg. And we need to be sure to add our alt text to inform users of assistive technology what this image is. We'll use the abbreviation for our business of "UST" and "logo".

<img src="img/logo.svg" alt="UST logo" />

Now on save you can see that our logo did not come to the top of the h1 as it should. If we look closely, we can see that it's positioned next to the unicorn. Hmm. Let's jump into our styles to find out why that is.

And here's our problem - when we created styles for the unicorn, we did not give it a class or anything else unique, we simply set up our rule as header img. This means that it's applying to all images found in the header which includes our new logo image.

To fix this, we'll need to scope this header img to a new class which we'll call unicorn. Then we need to move back into our HTML and update our unicorn image to now use this class.

/* Rename from existing `header img` to: */
.unicorn {
}
<!-- update to add the class -->
<img class="unicorn" src="img/unicorn.svg" alt="unicorn graphic" />

On save, the unicorn is positioned back to where we expected it to, and our new logo image is also positioned as we expect it to, which is top left and at its natural size because we have not added any other styles to it.

Before we move on, let's make the same adjustments of adding our logo image and updating the unicorn to have the class on our booking form page. So the class of unicorn, and also I copied the logo image to place as well. And double check that real quick by visiting our booking page, and we can see that those changes are the same.

So now it's time to create new styles specifically for our logo image. Before we move on to our styles, we also need a unique class to address our logo. So we'll add the class of .header-logo to both the index and booking page logos.

<!-- Add the class to index.html and booking.html logo images -->
<img class="header-logo center" src="img/logo.svg" alt="UST logo" />

Now using that class, we can begin to create our styles.

The logo is a little bit small, so let's first set a height of 60px. We'd also like to center it, so let's set margin-left: auto and margin-right: auto.

.header-logo {
  height: 60px;
  margin-left: auto;
  margin-right: auto;
}

And now it's time to move to our animation.

There are two common ways to create animation with pure CSS. The first that we'll use for our logo is based on transitions and transforms.

Let's talk through the goal of what we want our animation to do. On :hover of the logo image, we would like our rocket to appear like it is blasting off, which means we want it to move up and to the right in the same direction as it is pointing. In order for this transition to occur smoothly, we set up the transition property on the logo directly.

So here's the format of the transition property. First, we have to define which properties we're going to transition. In this case, we'll be using the keyword of all because we will be transitioning multiple properties.

Then we set the duration of the animation, so we will be using 450ms. Then the easing function, which is a fancy animation term that basically means the movement behavior of the animation. A common value here is ease-in. And then we're going to give it a small delay value, and we'll learn why in a minute. The value will be 80ms.

.header-logo {
  /* ...existing styles */
  transition: all 450ms ease-in 80ms;
}

And nothing's going to appear different yet because we want the animation to only happen on :hover. So let's create our rule for that which will be:

.header-logo:hover {
}

Which we saw that being used before on our links, but it can also be used on any other elements as well.

And on :hover, we will use the transform property. And within transform, we have a variety of tools at our disposal, including translate, which will move the element along the X - or horizontal - and y - or vertical - space, which is exactly what we want in order to move our rocket. In this case, we want to move it up and to the right.

The first value is the x, or horizontal, value and we'd like to move it 8vw which will move it eight viewwidths to the right. And then up negative 300%.

Now that percent is based on the computed dimensions of the element itself. So in other words, we'll be pulling it up 3x the height of our rocket element.

.header-logo:hover {
  transform: translate(8vw, -300%);
}

So let's save and see what we've accomplished so far.

On :hover of my rocket, you can see it moving up and to the right.

We can add one more piece to our transform to make this a little more believable the rockets taking off, and that property is scale. So in other words, resizing of the dimensions of the rocket which we'll set to 0.6, so in other words shrinking it to about 60% of its usual width.

.header-logo:hover {
  transform: translate(8vw, -300%) scale(0.6);
}

It's going pretty fast, so it might be hard to see, but the rocket shrinks slightly as it also moves up and to the right.

And you can see it snaps back into place when I transition the mouse off of the space the rocket occupies. Now, the reason for that is that the transition actually works in both directions. It's a bit like rewinding a video because the :hover is only a temporary state.

The second thing we want to do is give a little animation to our paragraph text. We want it to start faded out and when the page loads to have a slight delay after which it fades in and sort of moves up into place.

For this, instead of using a transition to make that animation happen, we will be using keyframe animations. So, let's see how that works.

Because this is the only paragraph in our header, we will use an element selector to attach our styles that will attach it to the header p for paragraph.

The first property we'll set is opacity, and we'll set this to a value of 0.1 so we can see what that's going to do.

header p {
  opacity: 0.1;
}

So you'll notice that our paragraph has faded almost completely away by setting it to opacity: 0.1.

What we're doing here is setting the initial state of the element, so the initial appearance that we wanted to have on load before the animation takes effect.

Also, using our transform property, we'd like to move the element down a little bit because we want the animation to move it back up into place.

So in this case, instead of translate for setting both X and Y, we'll specifically use translateY. And using a positive value on Y will move the element downwards.

header p {
  /* ...existing styles */
  transform: translateY(25%);
}

So you may have noticed it jump a little bit on save.

Now, it's time to define our keyframe animation that we'll use.

Similar to using @ to define our media query for keyframe animation, we say @keyframes and then we need to give our animation a name so we'll call this one fadeIn. Then within the curly brackets we define rules for points along the timeline.

@keyframes fadeIn {
}

And for a simple two-step animation, we will set the 0% keyframe which will be the starting point, and the 100% keyframe which will be the ending point.

Now for the initial point we'll actually copy our initial state, because the goal of the animation is to move from this initial state to full opacity and its original position on the page.

@keyframes fadeIn {
  0% {
    opacity: 0.1;
    transform: translateY(25%);
  }
}

So we'll also copy it into our 100% but update the values to full opacity using the value of 1 and moving our translateY to 0 which means the initial state.

@keyframes fadeIn {
  /* ...existing styles */
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

Now on save, you'll see that nothing has happened. That's because we need to add one last property called animation.

The first thing we define is the name of our keyframe animation, which we called it fadeIn. From there, it's set up similar to our transition property where the first value we'll define is 450ms, which is the duration of the animation. And once again, we'll use ease-in as the animation effect.

Then for this, we'll give it a slightly longer delay of 300ms, which basically will give the user time to have the page load and for them to begin to absorb the content, but not too long that they've scrolled past the header before being able to read this content.

The last property we need to supply the animation is forwords, meaning the play direction, as in we want the animation to play to that 100% keyframe, or that full opacity, and then stop.

header p {
  /* ...existing styles */
  animation: fadeIn 450ms ease-in 300ms forwards;
}

So on save, be sure to be watching this paragraph so you can see the animation happen. And with that, we have a very nicely animated intro for our header.

If we visit the "Book Now" page, the effect will also take place.

So for a new visits to the page, or you can also refresh, you will see the animation happening after a very slight delay.

In this lesson, we learned two methods for animation using pure CSS.

The first was using the transition property in combination with transform which we chose to enable on :hover of our rocket element, and this effect moved our rocket up and to the right when a user hovers.

You may have heard of this type of effect referred to as an Easter egg, because it may not be obvious but it will provide a bit of delight for a user who happens to find it accidentally.

The second type of animation we covered was keyframes animation. And we learend how to set an inital state at the 0% keyframe, and a final state at the 100% keyframe. And we ensured that our animation played through to that 100% state by using the forwards definition on the animation property.

Next Lesson