CSS animation using keyframes

Simple example of using CSS animations with keyframes. 
<!DOCTYPE html>
<html>
<head>
<style> 
    
div {
    width: 200px;
    height: 200px;
    background-color: green;
    position: relative;
    -webkit-animation-name: example; 
    -webkit-animation-duration: 8s; 
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes example {
    0%   {background-color:yellow; left:0px;}
    20%  {background-color:purple; left:100px;}
    40%  {background-color:gray; left:200px;}
    60%  {background-color:violet; left:300px;}
    90%  {background-color:brown; left:400px;}
    100% {background-color:green; left:0px;}
}

</style>
</head>
<body>

<div></div>

</body>
</html>
List

Responses

0 Replies