Create totally custom animations with CSS

Just a few additional declarations and you’ll be good to go!

Visual effects are a way to make your web page pop, and can even retain users and drive further engagement. Many visual builders come with some predefined animations by default, and will often tout them as a major selling point. But did you know you have total control over everything in CSS? All of the animations, and so many more, are possible with some extra CSS attributes. More than simply changing a button’s color when hovered, any CSS attribute can be animated with a fine level of control!

Define the animation with @keyframes

The first step is to create the animation by defining the keyframes. First step is to name the animation – after typing @keyframes, you can call the animation whatever you want (as long as it’s a single word, but dashes are allowed!). Then inside this declaration, you set the CSS attributes that will be affected at different points of the animation. This can be as simple as from X to Y, like the example below:

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

This is a simple fading animation, where the element set to animate will go from opacity an opacity of (invisible) to an opacity of 1 (fully visible). You can add as many different effects within the from and to as you like, as long as it’s a CSS attribute it’ll work!

For more complex animations, you can define different states at different percentages, like the example below:

@keyframes pulse {
0% { opacity: 0; }
33% { opacity: 1; }
66% { opacity: 0; }
100% { opacity: 1; }
}

Instead of just fading in, this pulse animation will blink in and out before finally settling at the visible opacity. This is just a plain example, but any range of effects can take place within a range of times. You could have a heading loop through a rainbow of colors, make an image wobble back and forth, or do the classic spinning newspaper entry. You’re only limited by the library of CSS effects, and that’s hardly a limitation at all!

Queueing the effect with the ‘animation’ attribute

Now that we have the animation defined, it’s time to associate it with the proper elements in HTML. This is done through another CSS declaration, this time using the aptly named animation attribute. Like border or margin, this is an umbrella attribute that expects several different values of sub-attributes. The attributes in question are:

• animation-name: the name of the animation you set in the @keyframes portion.
• animation-duration: how long one cycle of the animation takes. This is usually in seconds (2s) or milliseconds (500ms)
• animation-timing-function: this allows for some smooth acceleration into and/or out of the animation. “ease-in-out” is fairly common, and slows the animation at the start and end to give it a more smooth look.
• animation-delay: how long the animation should wait before starting, after being triggered.
• animation-iteration-count: how many times the animation should loop. Best practices tend to recommend no more than 3 loops, unless it’s a subtle effect.

There are a few more attributes as well, but they’re a little more complex than what we’re going for, allowing the animation to stop and start based on certain criteria and similar attributes. But let’s say we had an element to fade in using our animation defined above, the final CSS would look like this example:

div.fade {
animation: fadeIn 1s ease-in-out 500ms 1;
}

Now our container with a class of fade is prepped to fade in over the course of one second, easing in and out for a nice smooth transition, with a 500 millisecond delay, and it’ll only happen once.

Triggering the animation

Once you’ve queued the animation, it’s time to trigger it! By default, assigning the animation will have it play the animation as soon as the element in question loads. This may be fine if your animation is above the fold, but if your desired effect is supposed to happen farther down the page, then this can be a problem. It’ll trigger and run before the user ever has a chance to see it!

One of the best ways to trigger a CSS animation is to add the class in question (in our case, .fade), using JavaScript. This allows you to base the start on the user’s scroll position, clicking a button, or anything possible in this other expansive language. We won’t go into details too much in this post, but watch out for more details in a future article!

Some common animations and inspirations

The fade examples above are fairly straightforward uses, but the entire CSS world is your oyster when it comes to animations! We’ve seen some pretty incredible stuff – from rolling clouds in the background, images changing out and replacing each other bit by bit, and whole sections swinging onto the screen. Here are just a few advanced examples you can check out to find some inspiration!

Need some help implementing your custom animations, or want to brainstorm ways to engage users on your site? Don’t hesitate to reach out to us for a free quote! We’re always excited to take on new and interesting projects, and would love to help you turn your website dream into reality.