5 Animations Using CSS Keyframes

In this tutorial I’m going to show a few animations you can create using CSS Keyframes. I’m very new to this topic, so don’t expect any complicated ones. And if you have any tips and tricks please feel free to share them in the comments at the end of this article.

Using CSS Keyframes you can create animations. They way they work, is that they change between sets of CSS under a specific amount of time. You can change the style sets as many time as you want. You can set when the animations happen by using % ( percent ) or “from” and “to”. I’ll explain these in more depths below.

[tutorial_details]

First we’re going to create an HTML element, on which we will add our animations. This will look like the following:

<div id="example" class="animated animation-name"></div>

With the code above, we created an element with the ID of example, and two classes: animated and animation-class. You can use the ID to style the element, and animated class to configure the animation duration, fill mode etc. See code below

/*
 * Animation configurations ( duration and fill mode )
*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

The animation-class will be used to define which animation we want to apply to the element.

Below I’ll show you 5 basic animations you can create using CSS Keyframes.

Bouncing Animation

To create the bouncing animation, we will be using “from” and “to” which switches from one set of CSS to an other. In our case this will move out element up and down. See the code below

/*
 * Animation for webkit
*/
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
} 
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
} 
/*
 * Adding the animation to our element
*/
.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}

Fade Animation

To create the Fade animation we will use the opacity CSS property. For the fade in we use from 0 to 1 and for fade out we use from 1 to 0. see code below

/*
 * FadeIn animation
*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
/*
 * FadeOut animation
*/
@-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes fadeOut{
    0% {opacity: 1;}
    100% {opacity: 0;}
}
.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

Pulse Animation

The pulse animation uses the scale property, and % ( percent ) instead of “from” and “to”

/*
 * Pulse animation
*/
@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(1); }
    50% { -webkit-transform: scale(1.1); }
    100% { -webkit-transform: scale(1); }
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

Flash Animation

The Flash animation uses the same opacity CSS property but instead of from and to, we use the % ( percent ).

/*
 * Flash animation
*/
@-webkit-keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}
@keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}
.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}

Shake Animation

The shake animation is basically the same as the bounce, but instead and up and down, we move our element from left to right

/*
 * Shake animation
*/
@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
    20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}

As I mentioned above, I’m new to this section of CSS, so I’ll be digging deeper into it, this means there will be more articles and tutorials related to this.

Also, if you like playing around with animations and css, take a look at Coveloping’s CSS Animation Generator

If you enjoyed this article, please consider sharing it with your friends and followers. Also if you have any questions, feel free to leave a comment down below!