JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<div id="rectangle" class="animation">
    <div id="square" class="animation"></div>
</div>

CSS

#square {
    position: absolute;
    width:100px;
    height:100px;
    background-color:blue;
    transform: translate(100px, 0);
    /** Chrome & Safari **/
}
#rectangle {
    width:200px;
    height:100px;
    background-color:red;
}
#rectangle:hover #square {
    animation: animationFrames 0.8s Infinite;
    transform: translate(0, 0);
    /** Chrome & Safari **/
}
@keyframes animationFrames {
    0% {
        transform: translate(10px, 0);
    }
    10% {
        transform: translate(20px, 0);
    }
    20% {
        transform: translate(40px, 0);
    }
    30% {
        transform: translate(60px, 0);
    }
    40% {
        transform: translate(80px, 0);
    }
    50% {
        transform: translate(100px, 0);
    }
    60% {
        transform: translate(80px, 0);
    }
    70% {
        transform: translate(60px, 0);
    }
    80% {
        transform: translate(40px, 0);
    }
    90% {
        transform: translate(20px, 0);
    }
    100% {
        transform: translate(10px, 0);
    }