JSFiddle - React, Tailwind, and code Playground

Maintaining CSS Style States using "Infinite" Transition Delays http://dabblet.com/gist/2076449

by ikaruss

HTML

<button>Click me</button>
<div>:)</div>

CSS

div {
    margin-top: 10px;
    background: red;
    color: #fff;
    -moz-animation-name: test;     
    -moz-animation-duration: 3s;     
    -moz-animation-play-state: paused;
    -moz-animation-fill-mode: forwards;
    -moz-animation-timing-function: linear;
    -webkit-animation-name: test;     
    -webkit-animation-duration: 3s;     
    -webkit-animation-play-state: paused;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
} 
button:active ~ div {     
    -moz-animation-play-state: running;
    -webkit-animation-play-state: running; 
}  
@-moz-keyframes test {     
    0% { margin-top: 10px; }     
    100% {margin-top: 100px; }
}
@-webkit-keyframes test {     
    0% { margin-top: 10px; }     
    100% {margin-top: 100px; }
}