Intro to Animation

Animations Overview

CSS animations allow you to change the CSS of an element over time. The @keyframes rule specifies exactly what happens during an animation using specific frames at specific times. Each animation has a name, which is used to refer an element to the correct @keyframes rule. Each animation also has a duration, specified by animation-duration. It's easier to understand with an example. Here, we're animating a paragraph to change its background color:

p {
    animation-name: paragraphAnimation;
    animation-duration: 5s;
}
@keyframes paragraphAnimation{
    0% {
        background-color: blue;
    }
    100% {
        background-color: green;
    }
}

At the beginning of the animation, at 0%, the background color is blue. At the end, at 100%, it's green. CSS animates the transition over the 5 second duration.

You don't have to only use 0% and 100%; you can add more keyframes at any point in the animation. Here's another example, this time moving the paragraph on the screen:

p {
    position: relative;
    animation-name: paragraphAnimation;
    animation-duration: 5s;
}
@keyframes paragraphAnimation{
    0% {
        left: 10px;
        top: 10px;
    }
    25% {
        left: 200px;
        top: 10px;
    }
    50% {
        left: 200px;
        top: 200px;
    }
    75% {
        left: 10px;
        top: 200px;
    }
    100% {
        left: 10px;
        top: 10px;
    }
}