Eleftheria Batsou

Posted on Mar 24, 2023 • Originally published at blog.eleftheriabatsou.com on Mar 23, 2023

Getting Started with CSS Animations: Creating Engaging Web Animations

#css #tutoral

Welcome to the world of web development, where the only thing constant is change. And one of the biggest changes we've seen in recent years is the increasing use of CSS animations.

No longer are websites static, boring pages of information. Now, they are dynamic, engaging, and downright fun! So, if you're looking to level up your web development game and impress your visitors, buckle up and get ready to learn about CSS animations

TL'DR

The article titled "Getting Started with CSS Animations: Creating Engaging Web Animations" provides an introduction to CSS animations and how they can be used to create engaging web animations. The article covers the basics of CSS animations, including the different types of animations and how to create them using CSS. It also includes tips for creating effective web animations, such as using keyframes and easing functions. The article concludes by encouraging readers to experiment with CSS animations and explore the various resources available for learning more about CSS.

Introduction

Have you ever visited a website and noticed how some elements gracefully move, fade, or change color as you scroll or interact with them? These seemingly magical effects are made possible by CSS animations. From simple transitions between states to complex interactive animations, CSS offers a powerful and flexible toolset to bring websites to life.

At its core, CSS animations allow you to apply visual effects to web elements using keyframes , timing functions , and other properties (we'll talk about these later in the article). You can animate almost any aspect of an element, from its position and size to its opacity and background color. With CSS, you can create subtle effects that add polish to your website, or create more complex animations that tell a story or showcase your brand.

But why are animations so important in web development?

For starters, they can help draw attention to important information or calls to action.

Animations:

Can provide visual feedback to users, making interactions more intuitive and reducing confusion.
Can create a sense of delight and surprise, which can enhance the user's emotional connection to your website and brand.

By the end of this article, you will know/get:

By the end of this guide, you'll have the tools and knowledge you need to start incorporating animations into your own web projects and impressing your users.

More specifically:

Basic syntax of CSS animations (including how to define keyframes and how to apply animations to HTML elements)
Types of animations (let's learn about the different types of CSS animations that exist, such as transition animations and keyframe animations)
Animation properties (let's discuss the various animation properties that can be used to control the behavior of CSS animations, such as animation-duration, animation-timing-function, and animation-delay)
Best practices
Examples
Learning resources

Basic syntax of CSS animations

CSS animations are defined using the @keyframes rule. This rule specifies the animation's name , the styles that should be applied at various points during the animation, and the duration of the animation. Here's an example:

Defining Keyframes

@keyframes example-animation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

In this example, we've defined an animation called example-animation that gradually increases the opacity of an element from 0 to 1. The animation is divided into three keyframes: 0%, 50%, and 100%.

At 0%, the element is completely transparent (opacity: 0)
At 50%, the element is partially transparent (opacity: 0.5)
And at 100%, the element is fully opaque (opacity: 1)

Applying Animations to HTML Elements

To apply this animation to an HTML element, we use the animation property. Here's an example:

div {
  animation-name: example-animation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

In this example, we've applied the example-animation animation to a div element.

We've specified that the animation should last for 2 seconds (animation-duration: 2s), use an easing function to control the animation's acceleration and deceleration (animation-timing-function: ease-in), and have a 1 second delay before starting (animation-delay: 1s).

animation-iteration-count: infinite; specifies the number of times the animation should repeat. In this case, infinite means that the animation will repeat indefinitely

animation-direction: alternate; specifies the direction of the animation on each cycle. In this case, alternate means that the animation will play forward on the first cycle, then backward on the second cycle, and so on. This creates a back-and-forth effect that can be useful for certain types of animations.

By the way, the above code can also be written like this:

div {
  animation: example-animation 2s ease-in-out 1s infinite alternate;
}

Additional CSS code example:

Defining Keyframes

In addition to specifying the styles that should be applied at various points during an animation, you can also use the animation-fill-mode property to control what happens before and after the animation runs. Here's an example:

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-in {
  animation-name: slide-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

In this example, we've defined an animation called slide-in that slides an element in from the left side of the screen. We've used the from and to keywords to specify the animation's starting and ending points. We've also set the animation-fill-mode property to forwards, which means that the element will retain its final state (i.e. translated to the right) after the animation finishes.

Applying Animations to HTML Elements

You can apply animations to HTML elements using the animation property. Here's an example:

<button class="pulse">Click me!</button>

.pulse {
  animation-name: pulse;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

In this example, we've defined an animation called pulse that makes a button appear to pulse by scaling it up and down repeatedly. We've used the animation-iteration-count property to make the animation repeat infinitely. We've also used the animation-timing-function property to control the easing of the animation (in this case, easing out).

Types of Animations

CSS offers several types of animations that can be used to add engaging effects to your website. The two main types of CSS animations are:

Transition Animations

Transition animations are used to smoothly change the state of an element over time. They are applied to an element when its state changes, such as when it is hovered over or clicked. Transition animations are defined using the transition property, which specifies the property to be animated, the duration of the animation, and the easing function to be used. Here's an example:

button {
  background-color: blue;
  transition: background-color 0.5s ease-in-out;
}

button:hover {
  background-color: red;
}

In this example, the background color of the button changes smoothly from blue to red when the button is hovered over. The transition property specifies that the background-color property should be animated over a duration of 0.5 seconds, using an ease-in-out easing function.

Keyframe Animations

Keyframe animations are used to create more complex animations that can't be achieved with transition animations. They allow you to define multiple keyframes , or intermediate states, for an element and specify how it should transition between them.

Keyframe animations are defined using the @keyframes rule, which specifies the name of the animation and the styles to be applied at each keyframe. Here's an example:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

div {
  animation: rotate 2s linear infinite;
}

In this example, we've defined an animation called rotate that rotates an element 360 degrees over a duration of 2 seconds.

The @keyframes rule specifies two keyframes:

one at 0% where the element is not rotated,
and one at 100% where the element is rotated 360 degrees.

The div element is then animated using the animation property, which specifies the name of the animation (rotate), the duration of the animation (2s), the easing function to be used (linear), and the number of times the animation should repeat (infinite).

Other types of CSS animations include:

Transform Animations

Transform animations are used to change the shape, size, or position of an element. They are defined using the transform property, which allows you to apply various transformations such as scaling, rotating, and skewing. Here's an example:

div {
  transform: rotate(45deg) scale(1.5) translateX(50px);
}

In this example, the div element is rotated 45 degrees, scaled up by a factor of 1.5, and translated 50 pixels to the right.

Animation Shorthand

The animation shorthand property can be used to define all the animation properties in one line. Here's an example:

div {
  animation: rotate 2s linear infinite;
}

In this example, we've used the animation shorthand property to apply the rotate animation to a div element. The shorthand property takes four values:

animation-name : Specifies the name of the animation (rotate in this case).
animation-duration : Specifies the duration of the animation (2s in this case).
animation-timing-function : Specifies the easing function to be used (linear in this case).
animation-iteration-count : Specifies the number of times the animation should repeat (infinite in this case).

You can also use the shorthand property to specify other animation properties such as animation-delay, animation-direction, and animation-fill-mode. (We saw an example in the 1st section. 😉)

When to use CSS animations

Overall, CSS animations offer a powerful and flexible toolset for creating engaging and dynamic web content. By understanding the basic syntax of CSS animations, the types of animations that exist, and the various animation properties that can be used to control their behavior, you can start incorporating animations into your own web projects and impressing your users.

However, it's worth noting that there are some limitations to CSS animations, such as the fact that they can only animate certain CSS properties, and that they may not perform as well as other animation techniques in certain situations.

Other animation techniques that can be used in web development include JavaScript animations and SVG animations.

JavaScript animations use JavaScript code to create animations and can offer more fine-grained control over the animation process than CSS animations.
SVG animations use Scalable Vector Graphics (SVG) files to create animations and can be particularly useful for creating complex, interactive animations such as data visualizations or games.

However, both JavaScript animations and SVG animations can be more complex and time-consuming to create than CSS animations.

It's also important to use CSS animations judiciously and avoid overusing them, as too many animations can slow down a website and make it less user-friendly.

Animation Properties

CSS animations can be customized with various animation properties that control their behavior. We already explored some of them but let's do a quick recap and then see a couple of examples.

Here are some of the most commonly used animation properties:

animation-duration : Specifies the duration of the animation.
animation-timing-function : Specifies the easing function to be used for the animation.
animation-delay : Specifies the delay before the animation starts.
animation-iteration-count : Specifies the number of times the animation should be played.
animation-direction : Specifies the direction of the animation.
animation-fill-mode : Specifies what values are applied before and after the animation.
animation-play-state : Specifies whether the animation is running or paused.

By using these properties, you can control the speed, direction, and other aspects of your CSS animations to achieve the desired effect.

Example 1: Bouncing Ball

This example shows how to create a bouncing ball animation using CSS keyframe animations.

HTML:

<div class="ball"></div>

CSS:

.ball {
  width: 50px;
  height: 50px;
  background-color: #FF4136;
  border-radius: 50%;
  position: relative;
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    top: 0;
  }
  50% {
    top: 200px;
  }
  100% {
    top: 0;
  }
}

In this example, we've created a div element with the class ball. We've set the width, height, background-color, border-radius, and position properties to style the ball.

We've then used the animation-name, animation-duration, animation-timing-function, and animation-iteration-count properties to create the bouncing animation. The @keyframes rule specifies the intermediate states for the animation.

Example 2: Fading In Text

This example shows how to create a fading-in-text animation using CSS transition animations.

HTML:

<p class="fade-in">Hello, world!</p>

CSS:

.fade-in {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.fade-in:hover {
  opacity: 1;
}

In this example, we've created a p element with the class fade-in. We've set the initial opacity of the element to 0 using the opacity property.

We've then used the transition property to specify that the opacity should transition smoothly over a duration of 1 second, using an ease-in-out easing function.

Finally, we've used the :hover pseudo-class to specify that the opacity should change to 1 when the element is hovered over. This creates a fading in effect for the text.

Best practices for using CSS animations effectively

1. Keep animations simple

It's important to avoid creating overly complex animations that can be distracting or confusing for users. Instead, focus on creating simple, subtle effects that enhance the user experience without overwhelming them.

For example, instead of creating an animation that rotates an entire page, try animating a single element on the page, such as a button or icon.

Here's an example of a simple animation that scales up a button when hovered over:

.button {
  transition: transform 0.2s ease-in-out;
}

.button:hover {
  transform: scale(1.1);
}

2. Avoid excessive use of animation effects

While animations can be a great way to add visual interest to your website, it's important to use them judiciously. Too many animations can slow down your website and make it less user-friendly.

For example, instead of animating every element on a page, try limiting animations to specific sections or elements that are particularly important.

Here's an example of excessive use of animations that can be overwhelming for users:

* {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

This code applies a spinning animation to every element on the page, which can be disorienting and distracting for users. Instead, consider using animations selectively to create a more focused and effective user experience.

3. Use animations to enhance user experience:

Animations can be used to provide visual feedback to users, making interactions more intuitive and reducing confusion. For example, when a user submits a form, you can use a loading animation to let them know that their request is being processed.

Here's an example of a loading animation:

.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

4. Be mindful of performance:

Animations can have a significant impact on website performance, especially on mobile devices with limited processing power. Be sure to optimize your animations for performance by minimizing the number of animations on a page, using hardware acceleration where possible, and testing your animations on different devices and browsers.

Here's an example of a CSS animation that uses hardware acceleration:

.element {
  transform: translate3d(0, 0, 0);
  animation: slide-in 1s ease-out;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

By using the translate3d property, we can enable hardware acceleration for the animation, which can improve performance on some devices. This is because translate3d uses the device's graphics processing unit (GPU) to render the animation, which is often faster and more efficient than using the device's central processing unit (CPU).

However, it's important to note that not all devices support hardware acceleration, and using hardware acceleration can sometimes lead to other performance issues, such as increased memory usage. In general, it's a good idea to test your animations on a variety of devices and browsers to ensure that they perform well across different platforms.

Practical examples

How CSS animations can be used to enhance web content:

Hover animations : By adding simple hover animations to buttons or links, you can create a more engaging user experience. For example, you can add a slight color change or a small scale effect when the user hovers over a button to draw attention to it.
Scrolling effects : You can use CSS animations to create scrolling effects that add visual interest to your website. For example, you can create a parallax effect where the background image moves at a different speed than the rest of the page as the user scrolls.
Loading animations : Instead of showing a static loading icon, you can use CSS animations to create a more dynamic and engaging loading experience. For example, you can create a loading animation that animates a series of dots that move in a circle to indicate that the page is still loading.
Text effects : You can use CSS animations to create interesting text effects that draw attention to important information. For example, you can animate the color or size of text to create a more dynamic and engaging user experience.
Image animations : By adding CSS animations to images, you can create a more dynamic and engaging visual experience for users. For example, you can create an animation that zooms in or out of an image when the user hovers over it to provide more detail.

Here are some specific examples of websites or web applications that effectively use CSS animations to enhance the user experience:

a. Stripe: Stripe is a payment processing platform that uses CSS animations to create a more engaging user experience. When users hover over buttons or links on the site, they see subtle animations that draw their attention and provide visual feedback.

b. Apple: Apple's website is known for its sleek design and engaging animations. They use CSS animations to create scrolling effects, hover animations, and other engaging visual elements that help users navigate the site and learn about their products.

c. Nike: Nike's website uses CSS animations to showcase their products and create a more dynamic and engaging user experience. They use animations to zoom in on product images, highlight key features, and provide visual feedback when users interact with the site.

Learning resources

In no particular order, here are my top 5 resources for learning CSS and CSS animations:

FreeCodeCamp: Their CSS curriculum covers everything from the basics of CSS to more advanced topics like responsive design and CSS animations.
Codecademy: Their CSS curriculum covers topics like selectors, layout, and responsive design.
MDN Web Docs: Their CSS documentation covers everything from the basics of CSS to more advanced topics like CSS animations and transitions.
CSS-Tricks: CSS-Tricks is a website that offers tutorials, articles, and resources on CSS and web development. Their CSS tutorials cover a wide range of topics, from the basics of CSS to more advanced topics like CSS grid and flexbox.
W3Schools: Their CSS curriculum covers everything from the basics of CSS to more advanced topics like CSS animations and transitions.

Extra : And of course don't forget to follow the CSS tag on Hashnode, with more than 108.8K followers and 10.1K articles.

Conclusion

In conclusion, CSS animations can be a powerful tool for creating engaging web animations. By understanding the basics of CSS animations and experimenting with different techniques, web developers can create animations that enhance the user experience and make their websites more dynamic and interactive.

👋 Hello, I'm Eleftheria, devrel and content creator.

🥰 If you liked this article, consider sharing it.

🌈 All links | Twitter | LinkedIn | Book a meeting

DEV Community