JSFiddle - React, Tailwind, and code Playground

by jasonhsu

HTML

<img id ="jessica" src="http://www.elle.com.tw/var/elletw/storage/images/entertainment/news/celebrity-jessica-alba-sexy/node_635322/2929269-1-chi-TW/_1_dossier_image.jpg">

CSS

#jessica{
    height:200px; 
    width:200px;
}

img:hover {
   -webkit-animation: get-cool 10s forwards;
}

@-webkit-keyframes get-cool /* Safari and Chrome */
{
0%   {-webkit-transform:scale(1) translate(25px,25px) rotate(10deg);}
25%  {-webkit-transform:scale(1.5) translate(50px,50px) rotate(-10deg);}
50%  {-webkit-transform:scale(2) translate(75px,75px) rotate(20deg);}
100% {-webkit-transform:scale(2.5) translate(100px,100px) rotate(-20deg);}
}