html

css

.box {
background-color: #218D9B;
height: 100px;
width: 100px;
margin-left: 20px;
}

.transform {
-webkit-transition: all 12s ease;
-moz-transition: all 12s ease;
-o-transition: all 12s ease;
-ms-transition: all 12s ease;
transition: all 12s ease;
}

.transform-active {
background-color: #433EE0;
height: 1px;
width: 1px;
margin-left: 700px;
animation: example 311s reverse infinite;

}

.transform-after {
background-color: #A33EE0;
height: 200px;
width: 40px;
margin-left: 200px;

}
@keyframes example {
0% { margin-top:0; transform: rotate(45deg);}
30% { margin-top:100px; transform: rotate(15deg);}
40% {margin-top:1000px;
transform: rotate(-45deg);}
50% {margin-top:10px;
transform: rotate(5deg);}
100% { margin-top:100px; transform: rotate(-154deg);}
}

java
$(“#button”).click(function() {
$(‘.transform’).toggleClass(‘transform-active’);

}
);