I’m a Web Developer & UX Designer in Toronto.
I really love making beautiful and aesthetically pleasing websites. I build with user friendly CMS systems like WordPress 😉 and Shopify and I like making smart digital experiences people actually want to use.
I also have my SEO and Web Accessibilty Certificate — so feel free to AMA!

Janel Lucia

web developer. ux designer. #a11y enthusiast.

Adding CSS Animations to your site with Keyframes

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:

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.