Basic Rotating Animation

    < !DOCTYPE html>
    < html lang="en">
    < head>
        < meta charset="UTF-8">
        < meta name="viewport" content="width=device-width, initial-scale=1.0">
        < title>Basic Rotating Animation< /title>
    < /head>
    < style>
        *{ box-sizing: border-box;  padding: 0;  margin: 0;  }
        #div1 , #div2{
            color: white; height: 150px; width: 150px; border: 2px solid blue;
            animation-name: animation,animation1;  animation-duration: 3s;
            animation-timing-function: linear; animation-delay: 2s;
            animation-iteration-count: 4;/*for rotating*/
            background-image:url(Java-imgs/cat-img.avif);/*background image*/
            background-size:cover;  text-align: center;  text-transform: uppercase;
            text-indent: 20px; word-spacing: 40px; line-height: 50px; text-shadow: 2px 5px 2px;
        }
        @keyframes animation {
            from{margin-left: 0px;border-color: blueviolet;}
            to{margin-left: 500px;border-color: yellow;}
        }
        @keyframes animation1{
            0% {border-radius: 30px;transform: rotate(60deg);background-color: brown;}
            25%{border-radius: 60px;transform: rotate(120deg);background-color: red;}
            50%{border-radius: 90px;transform: rotate(180deg);background-color: greenyellow;}
            75%{border-radius: 120px;transform: rotate(240deg);background-color: skyblue;}
            100%{border-radius: 150px;transform: rotate(280deg);background-color: orchid;}
        }  
        .pagination {display:type}
        .pagination body { color:violet decoration:brown;}
    < /style>
    < body>
    < div id="div1">Image1< /div> 
    < hr>
        < div id="div2">Image3< /div>
    < hr>
    < /body>
    < /html>