Stampede Design
When it comes to web development, there are two common used methods for creating animations on the web; CSS and JavaScript. While both can be used to achieve the same results, you have to consider the purpose of the animation beforehand. The most widely used on the web is JavaScript. This is because it has a greater degree of element control for animations. CSS animations on the other hand are used for simple transitions. Considering which one to use is important for optimization to ensure a website loads quickly without bugs occurring.
On this post, we’ll be addressing CSS transitions. Although most experienced front-end developers are familiar with both HTML/CSS and JavaScript, those who are just starting out may only be familiar in just HTML/CSS. We hope this will serve as a guide to beginners or for those who just need a quick refresh on the subject.
Setting Up
Before we get started, let’s get into setting up some files.
- Create a basic HTML document file.
- Insert <div></div> into the <body>.
- Create a blank CSS file.
- Link it to your HTML document.
These are the only two files that we’ll be editing for this guide, so make sure to use a text editor that can open multiple files. We recommend Sublime Text 2.
Element Styling
For this guide, let’s use a simple 100×100 block to show how the animation works. Use the following code and insert it into your CSS file.
div {
width: 100px;
height: 100px;
background-color: blue;
}
How your element should look like.
Animation Trigger
To trigger the animation, we’ll use the :hover selector. Insert the following code into your CSS file.
div:hover {
animation-name: block;
animation-duration: 2s;
}
We are declaring the name of the animation as ‘block’ using the animation-name property. The duration of the animation will be set to two seconds, which can be seen in the animation-duration property. There are more properties that are used for controlling CSS animations, but we’ll keep to the basics for now.
Keyframes
Next, you’ll need to specify keyframes which determine the style an element will have at a given time during the animation sequence. By using the @keyframes at-rule, we’ll establish the first keyframe. Insert the following code into your CSS file.
@keyframes block {
from {background-color: blue;}
to {background-color: yellow;}
}
You have just created your first keyframe. It will change the background color of your animation element called ‘block’ from blue to yellow. Make sure to save your HTML and CSS files and try testing it out by hovering your mouse over the block.
Your block will change from blue to yellow.
Conclusion
Congratulations, you’ve just created a basic transition effect using CSS. To further customize the transition effect, try playing around with other properties to create meaningful microinteractions for your users.
We’ll go into detail next time on the types of CSS transition effects that are commonly used on the web. Got a question or didn’t understand something? Drop us a comment down below and we’ll do our best to answer it.