0

This may be a dumb question, but I want to know how to make the tag in my code change colors from a gradient of purple to red and back on it's own, without hovering over the tag or anything.

I've been trying to do some research and I keep coming across the something called webkit and webkit animation.

I'm unsure of how to use this since I have very much a beginner with html,css and js. Can someone provide me with an example of how to accomplish the transition between colors that I'm looking for?

Lubidia13
  • 47
  • 12

1 Answers1

0
<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* Standard syntax */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>

</body>
</html>
hubman
  • 149
  • 1
  • 15