Prince's Tech Blog

Animation in CSS and some of its hidden features

Prince Michael's photo
Prince Michael
·

6 min read

Animation in CSS and some of its hidden features

Introduction

CSS is a powerful language for styling web pages, but did you know that it can also create amazing animations? In this article, we will explore some of the basics of CSS animation and some of the tricks and tips that you may not know.

What is CSS animation?

CSS animation is a special way of making HTML elements change their appearance over time, without using JavaScript or any additional language. You can animate your CSS property, such as the colour, size, position, transform, etc. To create a CSS animation, you will need two things:

  • A set of keyframes that define the start and end states of the animation, and optionally some intermediate states.

  • A set of animation properties that specify how the animation should run, such as duration, delay, iteration count, direction, timing function, and fill mode.

For example, let's say we want to make a <div> element that spins around the center of a screen. We can use the following CSS code:

/* Define the keyframes */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Apply the animation to the element */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: spin; /* The name of the keyframes */
  animation-duration: 2s; /* How long the animation should take */
  animation-iteration-count: infinite; /* How many times the animation should repeat */
}

This will make the <div> element spin continuously for 2 seconds per cycle.

What are some hidden features of CSS animation?

CSS animation are an integral part of CSS and they have some features that you may not be aware of, but can make your website animations more interesting and dynamic. Here are some of them:

  • You can use negative animation delays to start the animation at a later state. This is useful for creating staggered or synchronized animations for multiple elements. For example, if you have three <div> elements with the same animation, but you want them to start at different times, you can use the following code to get negative delays like this:
div:nth-child(1) {
  animation-delay: 0s; /* Start immediately */
}

div:nth-child(2) {
  animation-delay: -0.5s; /* Start halfway through the animation */
}

div:nth-child(3) {
  animation-delay: -1s; /* Start at the end of the animation */
}

This will create a ripple effect!

  • You can also use percentages to define the keyframes, instead of using from and to. This allows you to create more complex animations with multiple steps. For example, if you want to make a <div> element bounce up and down, you can use percentages like this:
/* Define the keyframes */
@keyframes bounce {
  0% { transform: translateY(0); }
  25% { transform: translateY(-50px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-25px); }
  100% { transform: translateY(0); }
}

/* Apply the animation to the element */
div {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: bounce; /* The name of the keyframes */
  animation-duration: 1s; /* How long the animation should take */
  animation-iteration-count: infinite; /* How many times the animation should repeat */
}

When the code above is implemented, the <div> element will bounce four times per cycle.

  • Another interesting thing to focus on is changing the transform-origin property mid-animation, and even animating it. The transform-origin property defines the point around which the element is transformed, such as rotated or scaled. By changing it, you can create interesting effects, such as flipping or spinning the element around different axes. For example, if you want to make a <div> element flip horizontally and vertically, you can change the transform-origin like this:
/* Define the keyframes */
@keyframes flip {
  0% { transform: rotateY(0deg); transform-origin: center center; }
  25% { transform: rotateY(180deg); transform-origin: center center; }
  50% { transform: rotateY(180deg) rotateX(180deg); transform-origin: left top; }
  75% { transform: rotateY(0deg) rotateX(180deg); transform-origin: left top; }
  100% { transform: rotateY(0deg) rotateX(0deg); transform-origin: center center; }
}

/* Apply the animation to the element */
div {
  width: 100px;
  height: 100px;
  background-color: green;
  animation-name: flip; /* The name of the keyframes */
  animation-duration: 2s; /* How long the animation should take */
  animation-iteration-count: infinite; /* How many times the animation should repeat */
}

This will make the <div> element flip around its center and its left top corner.

  • CSS filters are a powerful and creative way to enhance the appearance of your web pages. They are also a way of applying visual effects to HTML elements, such as blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, and saturated.Though, CSS filters are not exactly under animations, but they can be animated using the transition or animation properties. You can use them to create realistic or artistic effects. To animate CSS filters, you need to specify the filter property as one of the transition or animation properties, along with the duration, timing function, and other parameters. For example, you can use the following CSS code to create a hover effect that changes the brightness and contrast of an image:
img {
  filter: brightness(1) contrast(1); /* The initial filter values */
  transition: filter 0.5s ease-in-out; /* The transition property and parameters */
}

img:hover {
  filter: brightness(0.5) contrast(2); /* The final filter values */
}

This will make the image darker and more contrasted when the mouse hovers over it. You can see the result here.

You can also use percentages to define the keyframes of an animation, and apply different filter values at each keyframe. For example, you can use the following CSS code to create an animation that cycles through different filter effects:

img {
  animation: cycle 5s infinite; /* The animation property and parameters */
}

@keyframes cycle {
  0% { filter: none; } /* No filter */
  25% { filter: grayscale(100%); } /* Grayscale filter */
  50% { filter: sepia(100%); } /* Sepia filter */
  75% { filter: hue-rotate(180deg); } /* Hue-rotate filter */
  100% { filter: none; } /* No filter */
}

This will make the image change its filter effect every 1.25 seconds.

Conclusion

CSS animation is a powerful and easy way to create web animations, but it also has some hidden features that can make your animations even more fun and creative. In this article, we learned how to use negative animation delays, percentages, and transform-origin to create different effects but there are numerous things you can accomplish with the aid of CSS animation. It is important however to note that the core issue with Animations in CSS is due to the browser compatibility which makes it difficult for users to get a full experience with CSS styles. Nevertheless, exploring the world of animations in CSS is very important as a developer since it creates engaging and immersive experiences that communicate emotions and ideas in a unique and easy-to-perceive way. Thank you for reading, please like my post and feel free to ask questions you may have in the comment section. Happy animating 😉

CSSCSS3stylingCSS AnimationCSS FrameworksFrontend Development