Topics
This tutorial will cover some of the cool effects you can give your HTML elements with CSS transitions and animation! This tutorial is for intermediate coders who already have an understanding of HTML and basic CSS.
CSS Transitions
CSS transitions allow elements to transition smoothly from one state to the next (i.e. crossfading from red to blue instead of abruptly switching colors), and there are a couple CSS properties that can help tweak transition behaviors (i.e. speed, duration).
We’ll start by trying to smoothly transition a red box into a blue box. I’ve created a 100px square div with a class of .coolguy, a red background, and black font color. In order for .coolguy to turn blue, he has to change states. To do this, we’ll use the :hover pseudo-class. Give .coolguy:hover a background of blue. Now you’ll see that .coolguy instantly turns blue when you hover your cursor over him. To see an example of this, check out this codepen.
We can use CSS transitions to make this color change less drastic. First, you want to make sure you tell .coolguy what property he’s changing (or what property you want to add an effect to) with transition-property. Since we’re changing his background color from red to blue, we’ll add transition-property: background under .coolguy. The other property you have to use is transition-duration, which specifies how long it takes to complete the transition. We’ll add transition-duration: 0.5s to .coolguy. There are a few other transition properties that you can play with to customize the transition.
- transition-timing-function specifies the speed curve of the transition. It can have a value of ease, linear, ease-in, ease-out, or ease-in-out. We’ll add transition-timing-function: linear under .coolguy, but you can test out different timing functions yourself by twiddling around with the codepen.
- transition-delay delays the transition effect by however may seconds you set it to. For example, if we gave .coolguy a transition-delay of 2s, then he would only start turning blue two seconds after we hovered over him. We won’t give .coolguy a delay, but you’re free to try this one out!
If you’ve inputted all the necessary transition properties above (the ones that are underlined) with values, .coolguy’s background should linearly change from red to blue in 0.5 seconds! You are welcome to take a look at the CSS in the codepen to see the code and play around with different values.
Shorthand Property Transition
If you’re doing multiple property transitions on one element, your code might get a little long. There’s actually a shorter way of writing out the code for transitions in one line! This will make your code less cluttered. Let’s pull out .coolguy again and give him a few more state changes. We’re going to try to add these effects to him in addition to his red > blue transition:
- change text from black to white
- change width from 100px to 300px
- change the border radius so that he has rounded corners
The shorthand way of writing out the transition properties is in this order:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
So by using the shorthand property transition, our transition for .coolguy’s red > blue would look like: transition: background 1s linear.
Now we can mess around with the other properties that we want to change. Make sure you list their final state change under .coolguy:hover because these will be the values they will end transition on.
.coolguy:hover {
background: blue;
color: white;
width: 300px;
border-radius: 5px;
}
I’ve added a few arbitrary values to color (font color), width, and border-radius, but you’re free to change them. Be sure to separate each transitioned property with a comma.
transition: background 1s linear, color 1s linear, width 1s ease, border-radius 1s ease;
Now when you hover over .coolguy, he should turn blue, his font should turn white, he should widen to 300px, and his corners will round in 1 second. You can take a look at the codepen to see the full code.
You can play around with transitioning different properties on .coolguy yourself. w3schools has a complete list of animatable properties here.
Vendor Prefixes for Transitions
When using any of the transition properties, it’s a good habit to include vendor prefixes to make it compatible across all browsers. This ensures that your transition will take effect no matter what browser your audience is viewing your code on. Here’s a list of vendor prefixes for CSS transitions:
- Chrome: -webkit-transition
- Safari: -webkit-transition
- Mozilla Firefox: -moz-transition
- Opera: -o-transition
Here’s an example of what your code might look like with vendor prefixes and shorthand property transition:
.coolguy { background: red; transition: background 1s linear; -webkit-transition: background 1s linear; -moz-transition: background 1s linear; -o-transition: background 1s linear; } .coolguy:hover { background: blue; }
CSS Animations
CSS animations allow you to animate an element using keyframes to position where and how they are at each specific point in their transformation. Let’s make Kirby fly! Here we have a .gif of Kirby flying, but he’s just flapping in the same place. We’ll can do a simple “float” animation on him with just CSS!
The first thing we want to do is to add the Kirby image in our html. Here’s a link to the Kirby .gif that we’ll be using. Go ahead and give that image a class of “kirby”.
Now let’s set up our .kirby for animation. You’ll find that a lot of the properties are similar to CSS transition properties. Below is a list of the ones we’ll be using, but you can see all the CSS animation properties here.
- animation-name is whatever name you want to give to the movement of your element, so we’ll add animation-name: floating under .kirby. You’ll need to specify this so .kirby knows it will be doing some animating.
- animation-duration determines the amount of time it takes .kirby to get from point A to point B. We’ll make this 2 seconds, so give .kirby a property of animation-duration: 2s.
- animation-iteration-count specifies how many times the animation cycle is played. If we only put 1, .kirby will only float up and down once. Instead, we’ll put animation-iteration-count: infinite so that the animation loops forever.
- animation-timing-function specifies the speed curve of the animation. It has all the same values as transition-timing-function. We’ll give .kirby animation-timing-function: ease-in-out to make him look more fluid.
Here’s what .kirby should look like now:
.kirby {
width: 150px;
animation-name: floating;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
Now we need to animate .kirby using @keyframes. Basically, we will be specifying what happens to .kirby at specific points in his transformation. Recall our animation-name, “floating”. You’ll want to specify this after @keyframes to bind the “floating” animation to our element, .kirby, so it looks like @keyframes floating.
Under @keyframes floating we have to specify each keyframe. We start with the keyword “from” (being at the 0% mark of the animation – the beginning) and end at “to” (being at the 100% mark of the animation – the end). At both “to” and “from,” we want .kirby to be in the same base state. We’ll give them both values of transform: translate(0, 0px). This means that at first keyframe and last keyframe, .kirby will be 0 pixels from the left (x-axis) and 0 pixels down (y-axis) from his current position. But we want him to float, so we need to add a 50% keyframe in-between. We’ll give it a value of transform: translate(0, 20px). This means halfway through .kirby’s animation, he’ll go 20 pixels down from his original 0,0px position. Our @keyframes floating should look like this:
@keyframes floating{
from {transform: translate(0, 0px);}
50% {transform: translate(0, 20px);}
to {transform: translate(0, 0px);}
}
Now .kirby should levitate up and down! Here’s the code-pen so you can see what it should look like. You can play around with code to see what different properties and values do to the final animation.
Shorthand Property Animation
Just like with CSS transitions, there’s a shorter way to write out your animation properties in just one line. Here’s a quick example of what our .kirby animation might look like shorthand:
animation: floating 2s infinite ease-in-out;
You can replace our previous animation properties with this shorthand version in codepen and .kirby will still animate the same! You can also add multiple animations like shorthand property transitions by separating them with a comma. You can try doing different animated transformations on .kirby yourself! Refer to the list of animatable properties here.
Vendor Prefixes for Animation
Vendor prefixes for animation are the same as vendor prefixes for transitions. Just in case, here’s the list again:
- Chrome: -webkit-animation
- Safari: -webkit-animation
- Mozilla Firefox: -moz-animation
- Opera: -o-animation
Here’s an example of what your code for .kirby might look like with the -webkit- and -moz prefixes and shorthand property transition:
.kirby {
width: 150px;
animation: floating 2s infinite ease-in-out;
-webkit-animation: floating 2s infinite ease-in-out;
-moz-animation: floating 2s infinite ease-in-out;
}
@keyframes floating{
from {transform: translate(0, 0px);}
50% {transform: translate(0, 20px);}
to {transform: translate(0, 0px);}
}
@-webkit-keyframes floating{
from {transform: translate(0, 0px);}
50% {transform: translate(0, 20px);}
to {transform: translate(0, 0px);}
}
@-moz-keyframes floating{
from {transform: translate(0, 0px);}
50% {transform: translate(0, 20px);}
to {transform: translate(0, 0px);}
}
These are just to make sure that your animation will show up across all browsers. It’s as simple as copy and pasting and changing the prefix at the beginning of the property!
That’s it for CSS animations and transitions. There are way more fun little things you can do with these properties, so be sure to mess around with them in your free time.