Animating or transitioning 1 color to another

HTML & CSS
1

I don’t know how to write the code, or I do, and I forgot how it would be done.

https://jsfiddle.net/31mtkoed/

How would I animate or transition the play from red to blue as an example of what I am trying to do?

Currently it starts out as blue.

For it to transition from red to blue. how would I do that?

No hover is being added here.

.play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid blue;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
  animation: fadeInPlay 3s ease 0s forwards;*/
  /*animation: fadeInPlay 3s ease 3s forwards;*/
  /*opacity: 0;*/
  pointer-events: none;
}

@keyframes fadeInPlay {

  100% {
    pointer-events: initial;
    /*opacity: 1;*/
    
  }
}

.play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid blue;
  transform: translateX(4px);
}
2

Do you mean on hover or when clicked?

On hover you would do it like this:

.play{transition:1s ease;}
.play:hover{
  border-color:red;
}
.play:before{
  transition:1s ease;
}
.play:hover::before{
    border-left-color:red;
}

If you meant on click then you’d need to do something different as you are hiding with display:none immediately so there is nothing to hover.

You could do this but then you’d also need to fade it out after a while.

.play{transition:1s ease;}
.play.hide{
  display:flex;
  border-color:red;
}
.play:before{
  transition:1s ease;
}
.play.hide::before{
    border-left-color:red;
}

You’ve done this loads of times in your other demos.

3

I mean on page load.

Going from 1 color to another.

Going from red to blue.

No click, no hover.

4

It depends on how quick your page loads.

A transition only happens when something changes so you can’t really use the transition property on page load as you;d need to wait for the page to load then remove or add a class to the body and then use that class to trigger the transition.

Alternatively you could just write a keyframe in css and have the element change color but as I said if the page takes 5 seconds to load and the animation only takes one second then you won’t see it.

.play{animation:fadeIn1 10s ease forwards;}
.play:hover{
  border-color:red;
}
.play:before{
  animation:fadeIn2 10s ease forwards;
}

@keyframes fadeIn1{
  0%{border-color:red}
  100%{border-color:blue}  
}
@keyframes fadeIn2{
  0%{border-left-color:red}
  100%{border-left-color:blue}  
}
1 Like
5

I think you forgot to remove:

.play:hover {
  border-color: red;
}
6

I am using this to disable the button from being clicked. https://jsfiddle.net/cvg60y8o/

.play {
  animation: disablePlay 3s ease 0s forwards;
 
  /*opacity: 0;*/
  pointer-events: none;
}

@keyframes disablePlay {

  100% {
    pointer-events: initial;
    /*opacity: 1;*/

  }
}

How would that be added to this?

or, how would they be combined?

.play {
  animation: fadeIn1 3s ease forwards;
}


.play:before {
  animation: fadeIn2 3s ease forwards;
}

@keyframes fadeIn1 {
  0% {
    border-color: red
  }

  100% {
    border-color: blue
  }
}

@keyframes fadeIn2 {
  0% {
    border-left-color: red
  }

  100% {
    border-left-color: blue
  }
}
7

Pointer-events doesn’t transition or animate which means its either on or off. There is no half way house.

You need to keep it off for 99.9% of the duration and then only turn it on at the end.

   0%{pointer-events:none;}
  99.9%{pointer-events:none}
  100% {
    pointer-events: initial;
    /*opacity: 1;*/

  }

Without the 99% rule the pointer-events:initial would get triggered at 0.1% ()more or less as soon as it started.

9

How do I get both animation codes to work with each other?

Currently play is commented out because then pointer-events: none; does not work.

https://jsfiddle.net/vrqt9d46/2/

  animation: disablePlay 3s ease 0s forwards;
  /*animation: fadeInPlay 3s ease 3s forwards;*/
  /*opacity: 0;*/
  /* pointer-events: none;*/
}

@keyframes disablePlay {

  0% {
    pointer-events: none;
  }

  99.9% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    /*opacity: 1;*/
}
  }

/*.play {
  animation: fadeIn1 3s ease forwards;
}

.play:before {
  animation: fadeIn2 3s ease forwards;
}

@keyframes fadeIn1 {
  0% {
    border-color: red
  }

  100% {
    border-color: blue
  }
}

@keyframes fadeIn2 {
  0% {
    border-left-color: red
  }

  100% {
    border-left-color: blue
  }
}*/
10

You need to fix the css first as you have missing brackets in places.

You can combine the animations like this.

  .play {
    animation: fadeIn1 3s ease forwards, disablePlay 3s ease 0s forwards;
  }

  .play:before {
    animation: fadeIn2 3s ease forwards, disablePlay 3s ease 0s forwards;
  }

All you were doing is replacing the old animation with a new one. It’s like saying background:red and then background:blue and expecting it to be both.

Luckily the animation property takes comma separated values so you can have two animations running at the same time.

1 Like
11

In this code here there is no fade: https://jsfiddle.net/34ypwgsr/

.play {
  animation: fadeIn1 487ms ease forwards;
}

.play:before {
  animation: fadeIn2 487ms ease forwards;
}

@keyframes fadeIn1 {
  0% {
    border-color: red;
  }

  99.9% {
    border-color: red;
  }

  100% {
    border-color: blue;
  }
}

@keyframes fadeIn2 {
  0% {
    border-left-color: red;
  }

  99.9% {
    border-left-color: red;
  }

  100% {
    border-left-color: blue;
  }
}

In this code here: https://jsfiddle.net/ewrq7kv2/1/

In the first fiddle, the fade is removed.

How would I remove the fade of the spinner changing to a full circle?

After it stops spinning, have it change to a circle with the right triangle without a fade.

That’s what I am trying to do.

Also, would I be using transparent or opacity to hide the right triangle?

or, would I be doing that a different way?

12

It’s because of this rule:

 99.9% {
    border-left-color: red;
  }

That’s because you have no time for the animation. You go from 99.9% to 100% so that means the element changes in .01% of 487ms. That’s instantly.

You’d do what you just did above!

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  99.9%{border-color: red transparent red transparent;}
  100% {
    transform: rotate(360deg);
     border-color: blue;
  }
}
1 Like
13

Thank you, I got it. https://jsfiddle.net/x04h82k1/

.play {
  animation: rotate 700ms linear forwards;
  border-color: red transparent red transparent;
}

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

  99.9% {
    border-color: red transparent red transparent;
  }

  100% {
    transform: rotate(360deg);
    border-color: blue;
  }
}

.play:before {
  animation: triangle 700ms linear forwards;

}

@keyframes triangle {
  0% {
    opacity: 0;
  }

  99.9% {
    opacity: 0;
  }

  100% {
    border-left-color: blue;
    opacity: 1;
  }
}
1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.