css hover color transition loop

Question

I want to create a hover color transition but I want it to keep a loop of it. I was yellow transition to red then back to yellow and so on.

I am unable to figure out how to loop it. Do I need to add javascript to it? If so how?

https://jsfiddle.net/hg4s0tmp/1/

    body {
        background-color: #FF0;
        padding: 15x;
        font-family: "Helvetica Neue",sans-serif;
}

    body:hover {
        background-color: #AD310B;
        -webkit-transition: background-color 1000ms linear;
        -ms-transition: background-color 1000ms linear;
        transition: background-color 1000ms linear;
        animation-iteration-count: 3;

}

user_4573410 · Answer

You need to use CSS animation with keyframes for an infinite loop, rather than the transition property. Here's an example:

div {
  background-color: pink;
}

div:hover {
  animation: change-color 2s infinite;
}

@keyframes change-color {
  0% {
    background-color: pink;
  }
  50% {
    background-color: yellow;
  }
}

Hover me

css hover color transition loop

1 Answers