JSFiddle - React, Tailwind, and code Playground

by MarmiK

HTML

<div>back</div>
<div class="animating"></div>
<div>forward</div>

CSS

@-webkit-keyframes someanimation {
    0% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
    100% {
        width: 100px;
    }
}

@-moz-keyframes someanimation {
    0% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
    100% {
        width: 100px;
    }
}

@keyframes someanimation {
    0% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
    100% {
        width: 100px;
    }
}



@-webkit-keyframes someani2 {
    0%,100% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
}

@-moz-keyframes someani2 {
    0%,100% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
}

@keyframes someani2 {
    0%,100% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
}



.animating {
    width: 200px;
    height: 200px;
    background-color: red;
    -webkit-animation: someanimation 5s infinite;
    -moz-animation: someanimation 5s infinite;
    animation: someanimation 5s infinite;
}
.animating:hover{
    color:#f60;
    -webkit-animation: someani2 6s infinite;
    -moz-animation: someani2 6s infinite;
    animation: someani2 6s infinite;
}