JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<div id="animation">Hover Over Me To Pause</div>

CSS

#animation {
    background:red;
    -webkit-animation:pulse 3s alternate infinite;
    animation:pulse 3s alternate infinite;
}
#animation:hover {
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
}

@-webkit-keyframes pulse {
    0% {
        width:100px;
        height:100px;
    }
    100% {
        width:300px;
        height:300px;
    }
}

@keyframes pulse {
    0% {
        width:100px;
        height:100px;
    }
    100% {
        width:300px;
        height:300px;
    }
}