CSS3 & Jquery Animation

Hi Abe,

I've created a simple pen showing the basic use of CSS3 animations, it might look confusing if you've never used animations but it's actually quite straight forward.

Before I go through the code I recommend you have the MDN animation docs open as they will help with any questions you may have in the future.

So as you can see, the below code has lots of references to the keyword, animation. There's a few differences references such as:

• animation-delay
• animation-duration
• animation-fill-mode
• animation-name

In CSS3 you can animate an element with all of these properties (aside from fill-mode) using the single animation property but I've opted not to use it for clarity and because it's harder to read.

What is this animation doing?

By default, I've pushed the h1 and h2 elements down by 100px and scaled them by .2 which makes the text appear slightly larger but that's just for an added effect when the animation runs.

Next you will notice a keyframes declaration which is what we use to animate the element, within the curly braces we can use values such as from and to but we can also use 0% and 100%, you can also group these blocks together but I won't go into that.

When the animation runs the browser will move the Y position of the element to 0px and scale it back down to 1 over a period of one second, by default browsers will run the animation and cause the element in this case to disappear. To get around this we use animation-fill-mode: forwards; which tells the browser to only run the animation from 0% to 100% and stop at 100%, without this property and the value forwards the animation would stop on 0% causing it to disappear from our screen.

One other thing to note is that you would have seen we have the following code in both our keyframes, h1 and h2 element declarations.

element {
  opacity: 0;
  transform: translateY(100px) scale(1.2);
}

We need to do this otherwise when the animation starts it will flicker and cause a weird issue where at the end of the animation it flickers again before sticking on the screen, setting it twice fixes this issue because the element has an initial state that the animation can start from.

In saying that, we technically don't need the 0% declaration in the keyframes but for the best compatibility I recommend having the duplication as it will prevent any weirdness, see how to declare the keyframes without the initial state below.

@keyframes fade-up {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
}

That's pretty much it, hope that helps and you can see the complete output below.

h1, h2 {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: fade-up;
          animation-name: fade-up;
  font-weight: normal;
  opacity: 0;
  position: relative;
  -webkit-transform: translateY(100px) scale(1.2);
      -ms-transform: translateY(100px) scale(1.2);
          transform: translateY(100px) scale(1.2);
}

@-webkit-keyframes fade-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px) scale(1.2);
            transform: translateY(100px) scale(1.2);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px) scale(1.2);
            transform: translateY(100px) scale(1.2);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
}

h1 {
  font-size: 100px;
}

h2 {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

Full page example

Happy coding!