/* CSS Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Global Styles */
body,html {
  font-family: 'Arial', sans-serif;
  height : 100%;
  width: 100%;
}

/* Add your own styles below this line */
#box{
    width: 300px;
    height: 300px;
    background-color: yellow;
    animation-name: chacha;
    animation-duration: 1s;
    position: absolute;
    animation-delay: 1s;
}
/* @keyframes chacha {
    from{}
    to{}
} */
@keyframes chacha {
    from{
        left :0;
        rotate: 0;
    }
    to{
        left : 50%;
        background-color: cyan;
        rotate: 360deg;
    }
}
#box2{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    position: absolute;
    animation-name: box2;
    animation-duration: 2.5s;
    animation-delay: 1s;
    animation-fill-mode: forwards; /**Animation khtm hone k bad final position par baith jaega**/
    animation-iteration-count: 2;/**Number of times animation chalega**/
    animation-iteration-count: infinite;
    /* animation-direction: reverse;*Direction of animation* */
    /* animation-direction: alternate  ; */
    animation-timing-function: ease-in;
}
@keyframes box2 {
    0%{
        left: 0;
        top :0
    }
    50%{
        left : 80%;
        top: 0;
    }
    100%{
        left : 80%;
        top: 80%;
    }
}