JSFiddle - React, Tailwind, and code Playground
HTML
<div id="parachute">
<img src="http://i.imgur.com/XSNyND8.png">
</div>
<a href="http://vayagato.com"></a>
CSS
#parachute{
position:absolute;
}
#parachute img{
transform-origin:50px 5px;
transition:transform 1s ease-in 0s;
animation-duration: 2.2s;
animation-name: paragato;
animation-iteration-count: infinite;
animation-direction: alternate;
-webkit-animation-duration: 2.2s;
-webkit-animation-name: paragato;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
@keyframes paragato {
from {
// transform:rotate(-20deg);
}
to {
// transform:rotate(20deg);
}
}
@-webkit-keyframes paragato {
from {
transform:rotate(-20deg);
}
to {
transform:rotate(20deg);
}
}
JavaScript
/*
var parachute = document.getElementById("parachute");
if(parachute){
setInterval(function(){
var top = parachute.offsetTop;
top += 1;
parachute.style.top = top+'px';
},50);
}
*/