CSS Animation

CSS Animation – Changing Color

Viva Magenta, Molten Metallic or Tranquil Blue? You’ll learn how to use colors and more with CSS in this step-by-step article.

Pyxofy

Apr 23, 2023 • 8 min read

Photo by andrew jay / Unsplash

Introduction

Colors! Everybody loves colors, and they’re all over the World Wide Web.

In this article, we’ll dive deep in to the CSS background-color property and learn how it can change our CSS shape’s color.

We’ll learn how to combine multiple CSS properties to produce unique animation sequences.

Preview

Preview of the animations we’ll make in this article.

Change Color and Move to Corners

Change Color, Move, Change Size

Prerequisites

We don’t assume prior knowledge of CSS or HTML, but it helps if you have some familiarity with how they work. Jump over to this article if you require an HTML and CSS primer.

We assume that you have set up tools to create CSS animation. If you haven’t, this article will show you how to set them up.

If you’re unfamiliar with CSS animation and @keyframes at-rule property, please read this article.

HTML Structure

<div class="container">
  <div class="circle change-color-corner"></div>
</div>
<div class="container">
  <div class="circle change-multi-color"></div>
</div>
<div class="container">
  <div class="circle change-color"></div>
</div>
<div class="container">
  <div class="circle change-color-move"></div>
</div>

container is our outermost enclosure. This enables us to center the content and draw a light gray border. The rest of the divs represent each animation sequence.

It’s important to keep the HTML structure as is for each animation to display properly.

Body and Container Div CSS

CSS code for the body and container div.

/**************************************/
/* Color, Body and Container Settings */
/**************************************/
/* Center shapes */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Set light gray border */
.container {
  width: 500px;
  height: 500px;
  border: 5px solid lightgray;
  background: royalblue;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1px;
  margin: 5px;
}

CSS Shape

The circle shape we’ll animate in this article.

/****** Shape ******/
.circle {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: burlywood;
  border-radius: 50%;
  animation-duration: 3s;
  /* animation-iteration-count: 3; */
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

Change Color

For our first example, let’s do a simple color transition. We’ll be using RGB hexadecimal string notation, commonly referred to as Hex colors. If you’re unfamiliar with Hex colors, check this article for details.

CSS Code

/* Change color */
.change-color {
  animation-name: change-color;
}

@keyframes change-color {
  from {
    background-color: #ed7e07;
  }
  to {
    background-color: #ddb787;
  }
}

To change a shape's color, we’ll be targeting the CSS background-color property.

The syntax is background-color: <color>.

We’ll transition our shape background from a dark orange, #ed7e07, to a light-brown hue, #ddb787.

In our from or start state, we set dark orange like this.

@keyframes change-color {
  from {
    background-color: #ed7e07;
  }

Then for our to or end state, we set light brown color this way.

to {
   background-color: #ddb787;
}

The animation-duration property is set to three seconds, 3s. The color transition from dark orange to light brown completes within three seconds.

We mainly use Hex colors in this article. Besides Hex colors, you can use different color models to assign background colors to your shape.

For a quick challenge, change the from or to background color property to your favorite color.

In the next section, let’s find out how to transition between three colors.

Change Multiple Colors

Let’s explore how to change between three colors in this section.

The three colors will be:

#ffffff - White
#fcc891 - Light Orange
#ff8f00 - Bright Orange

CSS Code

.change-multi-color {
  animation-name: change-multi-color;
}

@keyframes change-multi-color {
  from {
    background-color: #ffffff;
    transform: scale(2);
  }

  50% {
    background-color: #fcc891;
  }

  to {
    background-color: #ff8f00;
  }
}

We set our from state background-color to white.

from {
  background-color: #ffffff;
}

Next we set a middle state, in this case 50%. We set the background color to light orange.

50% {
  background-color: #fcc891;
}

The to or end state color we set to bright orange.

to {
  background-color: #ff8f00;
}

You may have noticed a transform: scale(2); in the from section.

This CSS property will scale the shape size twice as big as its default size. This is an optional CSS property. Please don't hesitate to remove it. For details on how to change shape size, jump to this article.

In the next section, let’s combine changing color and size while our shape is in motion.

Change Color While Moving and Changing Size

Let’s combine three techniques in our next animation example. We’ll change the shape’s color while changing size and moving it from the left side to the right side of the container.

CSS Code

.change-color-move {
  animation-name: change-color-move;
}

@keyframes change-color-move {
  from {
    background-color: #ddb787;
    top: 400px;
    left: 0px;
    transform: scale(0);
  }
  50% {
    background-color: #ffffff;
    top: 150px;
    left: 150px;
    transform: scale(2);
  }

  to {
    background-color: #f99f3e;
    top: 400px;
    left: 400px;
    transform: scale(0);
  }
}

First, let’s break down our from state.

from {
  background-color: #ddb787;
  top: 400px;
  left: 0px;
  transform: scale(0);
}

We start with a light brown,#ddb787 background color. We position our shape on the bottom left-hand side of the container using top: 400px; and left: 0px;. Initial shape size will be set to 0. The shape will not be visible on the screen. We accomplish this with transform: scale(0);.

Next, let’s tackle the middle or 50% state.

50% {
  background-color: #ffffff;
  top: 150px;
  left: 150px;
  transform: scale(2);
}

background-color: #ffffff;
Sets the background color to white.
top: 150px; and left: 150px;
This will position the shape in the middle of the container.
transform: scale(2);
Shape size will be twice its default size.

Third, let's see how the to state works.

to {
  background-color: #f99f3e;
  top: 400px;
  left: 400px;
  transform: scale(0);
}

We set the shape’s final color to orange, with background-color: #f99f3e;. The shape’s position is set to top: 400px; and left: 400px;. This will put the shape on the bottom right-hand corner. We use transform: scale(0); to make the shape disappear from the screen.

Was this section challenging?

For our final section, we’ll make the shape move to different corners of the container while changing its color.

Change Colors While Moving to Corners

Our final example will have six color variations. The animation will start from the middle of the container and proceed to the different corners of the container while changing color.

CSS Code

/* Change color while moving to corners */
.change-color-corner {
  animation-name: change-color-corner;
  animation-duration: 6s;
}

@keyframes change-color-corner {
  from {
    background-color: #ddb787;
  }

  20% {
    background-color: #4fa0f8;
    transform: translate(170px, -170px);
  }

  40% {
    background-color: #ed7e07;
    transform: translate(170px, 170px);
  }

  60% {
    background-color: #121212;
    transform: translate(-170px, 170px);
  }

  80% {
    background-color: #08b59b;
    transform: translate(-170px, -170px);
  }

  to {
    background-color: #ffffff;
  }
}

The color palette we’ll be using in this example.

From left to right:

#ddb787
#4fa0f8
#ed7e07
#121212
#08b59b
#ffffff

We have six keyframes or states in this animation sequence. Let’s break down each state to understand how they work.

from or start state.

from {
  background-color: #ddb787;
}

The animation sequence starts with the tan color circle shape placed in the middle of the container.

20% state.

20% {
  background-color: #4fa0f8;
  transform: translate(170px, -170px);
}

With transform: translate(170px, -170px);, we move our circle shape to the upper right-hand corner while transitioning its background color to a light blue shade, #4fa0f8.

40% state.

40% {
  background-color: #ed7e07;
  transform: translate(170px, 170px);
}

In the 40% state, we move the circle shape from the upper right-hand corner to the bottom-right corner. We use transform: translate(170px, 170px); to achieve this. The shape’s color will be orange, #ed7e07, when it reaches the bottom of the container.

60% state.

60% {
  background-color: #121212;
  transform: translate(-170px, 170px);
}

The circle color will be black, #121212, when it reaches the bottom left-hand corner of the container via this CSS code transform: translate(-170px, 170px);.

80% state.

80% {
  background-color: #08b59b;
  transform: translate(-170px, -170px);
}

For this state, we move the circle shape to the upper left-hand corner via transform: translate(-170px, -170px);. #08b59b gives the circle shape a teal hue.

to or final state.

to {
  background-color: #ffffff;
}

The shape returns to the middle of the container while transitioning to a white color, #ffffff.

This concludes all our examples for this article.

The last example may have been challenging because of the multiple keyframe states. We hope it demonstrated the power of CSS animation. By combining multiple keyframe states, you’ll be able to make very sophisticated animation sequences.

You can see and play with the code at Pyxofy’s CodePen page.

See the Pen CSS Animation - Changing Color by Pyxofy (@pyxofy) on CodePen.

Conclusion

In this article, we used the CSS background-color property extensibly. It enabled us to change the circle shape’s color.

By combining the CSS transform: translate() and transform: scale() functions, we moved our circle to different corners of its container while changing its size.

CSS animation is a powerful tool to highlight and drive more engagement to your content.

Challenge yourself by modifying the examples in this article. Change the shape’s color, size, and position. Share your animations with us on Twitter @pyxofy, on LinkedIn, Mastodon or Facebook.

We hope you liked this article. Kindly share it with your network. We really appreciate it.

Tweet this article!

Share on LinkedIn