.animate-enter, 
.animate-leave { 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
} 
 
.animate-leave.animate-leave-active,
.animate-enter {
    -webkit-transform: skewX(45deg) skewY(30deg);
    -moz-transform: skewX(45deg) skewY(30deg);
    -ms-transform: skewX(45deg) skewY(30deg);
    -o-transform: skewX(45deg) skewY(30deg);
    transform: skewX(45deg) skewY(30deg);
    opacity: 0;
    height: 0px;
}        
 
.animate-enter.animate-enter-active,
.animate-leave {
    -webkit-transform: skewX(0deg) skewY(0deg);
    -moz-transform: skewX(0deg) skewY(0deg);
    -ms-transform: skewX(0deg) skewY(0deg);
    -o-transform: skewX(0deg) skewY(0deg);
    transform: skewX(0deg) skewY(0deg);
    opacity: 1;
    height: 30px;
}


test {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

rota {
    position: absolute;
    -webkit-animation-name: rotat; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-name: rotat;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes rotat {
    0%   {transform:rotate(0deg);}
    25%  {transform:rotate(20deg);}
    50%  {transform:rotate(0deg);}
    75%  {transform:rotate(-20deg);}
    100% {transform:rotate(0deg);}
}

/* Standard syntax */
@keyframes rotat {
    0%   {transform:rotate(0deg);}
    25%  {transform:rotate(20deg);}
    50%  {transform:rotate(0deg);}
    75%  {transform:rotate(-20deg);}
    100% {transform:rotate(0deg);}
}

grossit {
    position: absolute;
    -webkit-animation-name: gros; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-name: gros;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes gros {
    0%   {transform:scale(1);}
    25%  {transform:scale(1.5);}
    50%  {transform:scale(2);}
    75%  {transform:scale(1.5);}
    100% {transform:scale(0.5);}
}

/* Standard syntax */
@keyframes gros {
    0%   {transform:scale(1);}
    25%  {transform:scale(1.5);}
    50%  {transform:scale(2);}
    75%  {transform:scale(1.5);}
    100% {transform:scale(0.5);}
}