Can I animate color changes over time with CSS?

September 11, 2025

So, can color be animated with CSS? Yes. What way will work best for my purposes, TBD.

Hello Animation

Here’s a variation of an example from mdn’s animation page

<style>
    #example1 {
      width: 50vw;
      height: 50vh;
      overflow: hidden;
      background-color: lightblue;
      display: flex;
      justify-content: center;
      align: center;
    }
     
    #example1 .sun {
          background-color: yellow;
          border-radius: 50%;
          /* creates a circular background */
          height: 20vh;
          /* makes the sun the size of the viewport */
          aspect-ratio: 1 / 1;
          animation: 4s linear 0s infinite alternate animating-multiple-properties;
      }

    @keyframes animating-multiple-properties {
      from {
          transform: translateY(calc(50vh - 20vh));
          background-color: red;
          filter: brightness(75%);
      }

      to {
          transform: translateY(0%);
          background-color: orange;
          /* unset properties i.e. 'filter' will revert to default values */
      }
    }
                
</style>
<div id="example1">
  <div class="sun"></div>
<div>

With Variables

CSS has variables! This animation is just the color change from the first, but done with variables.

<style>
  :root {
     --example2-start-color: red;
     --example2-end-color: orange;
  }
  #example2 {  
    width: 50vw;
    height: 50vh;
    overflow: hidden;
    background-color: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #example2 .sun {
      background-color: yellow;
      border-radius: 50%;
      height: 30vh;
      aspect-ratio: 1 / 1;
      animation: 10s linear 0s infinite alternate example-two-frames;
  }

  @keyframes example-two-frames {
    from {
        background-color: var(--example2-start-color);
        filter: brightness(75%);
    }
    to {
        background-color: var(--example2-end-color);
    }
  }
</style>
<div id="example2">
  <div class="sun"></div>
</div>

Control a Variable With Javascript

Once you have a variable, it can be controlled via JavaScript. This sun should be skittering through hue changes.

NOTE: Some blog meta. All the <script> tag enclosed code from the post is consolidated into one script tag at the bottom of the post.

<style>
  :root {
     --example3-color: red;
  }
  #example3 {  
    width: 50vw;
    height: 50vh;
    overflow: hidden;
    background-color: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #example3 .sun {
    background-color: yellow;
    border-radius: 50%;
    height: 30vh;
    aspect-ratio: 1 / 1;
    background: var(--example3-color);
  }
</style>
<div id="example3">
  <div class="sun"></div>
</div>
<script>
let startTime = null;
let hue = 0
let root = document.documentElement;
function animateColor(currentTime) {
  if (!startTime) startTime = currentTime;
  const elapsed = currentTime - startTime;
  hue = elapsed/60;
  root.style.setProperty('--example3-color', `hsl(${hue}, 100%, 50%)`)
  //console.log("hello animateColor.")
  requestAnimationFrame(animateColor);
}
  window.onload = function() {
    animateColor(new Date())
    //console.log("hello from the script.")
  }
</script>

Animation Delays

It’s possible to delay an animation’s start time with animation-delay. Negative numbers work too! It jumps the position of the animation further in as if the animation had been playing for that long before the page had loaded.

This sun should track with the seconds, popping back to red at the flip to a new minute, no matter the precise time the page was opened.

<style>
  :root {
    --example4-start-color: red;
    --example4-end-color: yellow;
    --example4-delay: 0s;
  }
  #example4 {  
    width: 50vw;
    height: 50vh;
    overflow: hidden;
    background-color: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #example4 .sun {
    border-radius: 50%;
    /* creates a circular background */
    height: 30vh;
    /* makes the sun the size of the viewport */
    aspect-ratio: 1 / 1;
    background: var(--example4-start-color);
    animation: example-four-frames 60s none var(--example4-delay) infinite;
  }
  @keyframes example-four-frames {
    from {
        background-color: var(--example4-start-color);
        filter: brightness(75%);
    }
    to {
        background-color: var(--example4-end-color);
    }
  }
</style>
<div id="example4">
  <div class="sun"></div>
</div>
<script>
function setDelay() {
    var date = new Date();
    var seconds = date.getSeconds();
    let root = document.documentElement;
    let delay = seconds * -1
    console.log(seconds, delay);
    console.log("hello from setDelay")
    root.style.setProperty('--example4-delay', `${delay}s`);
}
  window.onload = function() {
    setDelay();
  }
</script>

Resources

I bought a Udemy course on CSS a while ago now that I keep going back to when i need a CSS refresh.

But here are some of the links that helped in making the examples for this post:

General CSS Tools

Animation Docs