/* keyframes IT IS USED TO CREATE ANIMATION, THEN A NAME IS NEXT.*/

@keyframes animacao-box{  
    from {                                      /*FROM INDICATES THE STATE OF START OF ANIMATION*/
        background: slateblue;
        border-radius: 0px;
        top: 0px;
        left: 0px;
    }

    to{                                        /*TO INDICATES THE FINAL STATE OF ANIMATION*/
        background: orangered;
        border-radius: 300px;
         top: 200px;
         left: 500px;

    }
}

/* IT IS ALSO POSSIBLE TO USE THE ANIMATION TRANSFORMATION AS FOLLOWS:

@keyframes animacao-box {
    0%   {top: 0px; left: 0px; background: slateblue; border-radius: 0px;}
    25%  {top: 200px; left: 500px; background: orangered; border-radius: 300px;}
    75%  {top: 200px; left: 1000px; background: orangered; border-radius: 300px;}
    100% {top: 0px; left: 1000px; background: slateblue; border-radius: 0px;}
  }
*/

#box-animacao{

    width: 300px;
    height: 300px;
    background: slateblue;
    position: relative;
    animation-name: animacao-box;           /* CALLS ANIMATION CREATED */
    animation-duration: 5s;                 /* ANIMATION TIME*/
    animation-delay: 3s;                    /* WAITING TIME TO START*/
    animation-iteration-count: infinite;    /* HOW MANY TIMES SHOULD REPEAT*/
    animation-direction: alternate;         /* THE WAY IT IS REPEATED*/
}

/* YOU CAN ALSO DECLARE ANIMATION AS FOLLOWS:

    animation: animacao-box 5s 3s infinite alternate;

*/