Try it Live

​x
 
<!DOCTYPE html>
<html>
<head>
    <style>
        img {
          position:relative;
          width:200px;
          height:200px;
          -webkit-animation-name:val1-loop;
          animation-name:val1-loop;
          -webkit-animation-duration:5s;
          animation-duration:2s;
          animation-iteration-count:infinite;
        }
        
        @-webkit-keyframes val1-loop {
          50% {width:300px;}
        }
        
        @keyframes val1-loop {
         50% {width:300px;}
        }
    </style>
</head>
<body>
    <h2> Example of animation loop</h2>
    <p>CSS animation-iteration-count property is used to create the loop of the animation. Set animation-iteration-count: infinite to continue the animation without stopping.</p>
    <b>If we set animation-iteration-count:4 then the given animation will repeat 4 times continuously</b>
    <img src="https://i.ibb.co/YkTLTng/dog.png">
</body>
</html>
​