2

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;

}
devolution
  • 37
  • 2
  • 6
  • Are you actually using [Microsoft Visual Web Developer](https://devblogs.microsoft.com/aspnet/visual-web-developer-2010-express-has-arrived/)? That was last released in 2010? Really? – Heretic Monkey Jul 14 '21 at 14:22
  • Also, please include the HTML and any JavaScript you're using in the question, not just on an external site like jsfiddle.net. You can use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) (icon looks like `<>` in the editor toolbar) to produce a runnable example using an interface much like jsFiddle's. I know you've already got your answer, but Stack Overflow is more about helping everyone with the same question as you, so please help those people by improving your question. – Heretic Monkey Jul 14 '21 at 14:26

1 Answers1

3

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;
  }
}
<div>Hover me</div>
Jon Uleis
  • 17,693
  • 2
  • 33
  • 42