/* 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;
*/
