rotatingHIi.html

<html>
    <head>
        <style>
            div{
                width: 300px;
                height: 300px;
                background-color: lightskyblue;
                animation-name: animate1;
                animation-duration: 5s;
                animation-delay: 1s;
                animation-direction: normal;
                animation-iteration-count: 1;
                position:absolute;
                border-radius: 50%;
                border: 5px colid black;
                text-align:center;
                font-size:xx-large;
            }
            @keyframes animate1{
                0%{background-color: lightskyblue;top:0px;left:0px}
                50%{background-color: green;top:300px;left:300px;transform: rotate(180deg);}
                100%{background-color: darkred;top:0px;left:600px;transform: rotate(360deg);}
            }
        </style>
    </head>
    <body>
        <div>Hi</div>
    </body>
</html>