How to Make Your Website Stand Out with CSS Transitions & Animations
Designers and artists have always loved to play around with movement, effects, and different types of tricks to add an extra spark to their work. In fact, way back in the 1960s, a whole movement called op art emerged, using optical illusions to create the sensation of motion.
Over time, new and innovative approaches have emerged, like the trendy kinetic art that takes advantage of multidimensional movement to expand the viewer’s experience. And let’s not forget the world of computer science, which introduced motion with the very first blinking cursor back in 1967.
Before CSS3 came along, JavaScript was the go-to method for animating DOM elements in front-end development. And while that method still works, CSS3 introduces new properties that allow us to enhance our designs with more intuitive effects and motion.
CSS3 offers two main techniques for achieving this: transitions and animations. In this post, let’s explore what they are, how they differ, and how you can use them to bring your designs to life.
Transitions
Both transitions and animations serve the purpose of visually representing changes in the state of an HTML element by modifying one or more of its CSS properties.
When you hover your mouse over a button or a link, you might notice that it changes color. That’s a simple way of showing that something is happening on the screen.
Changing the appearance of a link when you hover, click, or focus on it has been around for a long time. It’s one of the basic ways to add some visual interest to a website, even before fancy CSS3 features came along.
a { color: orange; }
a:hover { color: red; }
a:focus { color: blue; }
a:visited { color: purple; }
We use transitions when we want an HTML element to change from one state to another. With CSS3, we have more control over how these changes happen. We can control the timing and duration of the transitions, and use different effects to make things more interesting.
In this next section, I’ll walk you through the new CSS properties, but first, let’s understand the difference between animations and transitions. Don’t worry, I’ll explain everything clearly!
Transitions have two important points: a starting point and an endpoint. The stages in between are automatically determined by the browser, so we can’t control them with CSS. To make transitions happen, we need to trigger them explicitly, like using a new CSS pseudoclass or adding a class with jQuery.
Now, let me show you a fantastic example of how CSS3 transitions can be used effectively. In the following demonstration, the author smoothly reveals hidden information without disrupting the user’s experience. Take a look and see how attention is drawn to the new content without being overly intrusive.
Okay, now that you’re familiar with transitions, let’s dive into animations!
Animations are a cool way to make things move on a webpage. They let us create unique paths for objects to follow, and we can even change how those objects look along the way. It’s like telling a story with pictures!
Now, if you’ve ever tried making animations with CSS3, you know it can be a bit tricky. Luckily, there are some awesome animation libraries that can make our lives easier. These libraries have pre-built animations that we can use right away, saving us time and effort.
Here are a couple of important things to know about CSS3 animations:
- Animations can start all on their own when the webpage loads, or when something else happens on the page. No need for us to tell them when to start, they just know!
- We can use animations instead of transitions. Transitions are like quick changes, while animations are more like a whole journey. Sometimes we want that extra pizzazz, and that’s where animations come in.
In order to create certain animations, we need to define some intermediate states, which we call keyframes. These keyframes determine the number, frequency, and style of the animations.
For example, take a look at this awesome animated dropdown menu below. When you click on the button, the animation begins. This happens because we use jQuery to add extra classes to the list items when the click event happens.
Afterwards, these new classes are animated using specific @keyframes rules in the CSS file. When the user clicks on the button again, jQuery removes the extra classes and hides the menu once more.
Now, let’s talk about CSS properties and the @keyframes at-rule.
When it comes to transitions, there are two ways we can go about it. First, we can use the transition shorthand property, which combines multiple transition-related properties into a single line. Alternatively, we can use four individual properties: transition-property, transition-duration, transition-timing-function, and transition-delay. These options give us more flexibility in specifying the desired transition effects.
When using transitions or animations, it’s crucial to specify which CSS properties will be modified during the state change. This ensures that the browser knows what changes to make. In the case of transitions, we can achieve this by explicitly setting the desired properties:
.element {
background: orange;
transition-property: background;
transition-duration: 3s;
transition-timing-function: ease-in;
}
.element:hover {
/* This is when the magic happens */
}
In the example above, we specifically specified the background property because that’s what will change during the transition. Feel free to experiment with different properties and values to create unique and captivating transitions!
You can change multiple CSS properties at once using transitions. In the example below, I have modified the code to transition the background and border properties: transition-property: background, border; Alternatively, you can use transition-property: all; if you want to transition all properties without specifying each one separately.
You also have the option to use shorthand for the transition property. However, it’s important to pay attention to the correct order of the inner properties. You can find the syntax in the documentation.
If you want to create an animation, you need to specify the related keyframes. This is done by defining separate @keyframes at-rules where you modify the CSS properties. Here’s an example:
In the example given above, we made a really simple sliding effect. We first named the animation and then connected three keyframes to it, which we specified in the @keyframes slide at-rules. The percentages refer to how much of the animation has happened, so in the example, 50% would be at 1.5 seconds.
We could also use the shorthand animation property or define the keyframes more simply with the “from” and “to” rule, like this:
.element {
position: relative;
animation: slide 3s ease-in;
}
@keyframes slide {
from {
left: 0;
}
to {
left: 400px;
}
}
Creating more complex animations is like an art form, and if you’re interested, you can check out our animation tutorials on how to make an advanced marquee and create a bounce effect.
When you create transitions and animations, it’s important to keep in mind that not all CSS properties can be animated. To figure out if the property you want to change can be animated, it’s a good idea to check the CSS Animatable.
In the past, CSS3 animations and transitions required vendor prefixes to work properly. But now, we no longer need to use them. However, the Mozilla Developer Network still suggests adding the -webkit prefix for a while, since Webkit-based browsers have only recently become stable.
CSS3 animations and transitions used to rely on vendor prefixes, but that’s not the case anymore. However, for a period of time, it’s still recommended to add the -webkit prefix according to the Mozilla Developer Network. This is because support for Webkit-based browsers has only recently become stable.
