Adding CSS Animations to your site with Keyframes | Janel Lucia

Janel Lucia

web developer. ux designer. #a11y enthusiast.

Adding CSS Animations to your site with Keyframes

CSS + SCSS

css animations blog post picture

CSS animation 101

I’m going to show a few CSS animations you can create using Keyframes. CSS animations allow animation of most HTML elements without using JavaScript or Flash. (even though Javascript is awesome!) This topic is so exciting with seemingly endless possibilities. And it’s surprising how uncomplicated it is. If you have any of your own tricks please comment below.

Using CSS Keyframes you can create animations. It works by changing 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”.

Getting Started

First thing you need to do is create an HTML element, to add our animations. This will look like the following:


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Animation Sample</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="animation animation-name"></div>

<div id="one" class="animation fadeIn fedeOut">Hi</div>
<div id="two" class="animation flash">Hi</div>
<div id="three" class="animation shake">Hi</div>
<div id="four" class="animation bounce">Hi</div>
<div id="five" class="animation pulse">Hi</div>

</body>
</html>

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

 

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

I’ll show you a few basic animations you can create using CSS Keyframes.

.animation {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

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;
}

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

To create the shake 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 left and right. See the code below


/* 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;
}

Bounce Animation

The bounce animation is pretty much the same as the shake, but instead and left and right, we move our element up and down.


/* Bounce animation */

/* 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;
}

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;
}

If you are interested in learning more about CSS animation? Check out DevTips, he has a really cool animation and keyframes series you can check out

https://www.youtube.com/watch?v=f1WMjDx4snI

 

Let me know what you thought, how this worked for you and if you do it differently share your tricks.

Leave a Reply

Your email address will not be published. Required fields are marked *