JSFiddle - React, Tailwind, and code Playground

by gergana

HTML

<div class="picture"></div>

CSS

.picture {
                    width:213px;
                    height:295px;
                    background:yellow;
    -webkit-animation:swing 3600ms ease-in-out 6000s;
    -webkit-transform-origin:top;
}

.picture:hover {
    -webkit-animation:swing 3600ms ease-in-out;
    -webkit-transform-origin:top;
}

@-webkit-keyframes swing {
    0% {
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg); }
    
    25% {
        -o-transform: rotate(-7deg);
        -webkit-transform: rotate(-7deg);
        -ms-transform: rotate(-7deg);
        transform: rotate(-7deg); }
    
    50% { 
        -o-transform: rotate(7deg);
        -webkit-transform: rotate(7deg);
        -ms-transform: rotate(7deg);
        transform: rotate(7deg); }
    
    75% {
        -o-transform: rotate(-7deg);
        -webkit-transform: rotate(-7deg);
        -ms-transform: rotate(-7deg);
        transform: rotate(-7deg); }
    
    100% {
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg); } 
}