JSFiddle - React, Tailwind, and code Playground

by rwaldin

HTML

<div id="foo"></div>
<input id="play" type="button" value="Play"/>
<input id="pause" type="button" value="Pause"/>

CSS

p{padding-left:60px;}
#foo{
border-radius:50px;
width:50px;
height:50px;
background:#c00;
-moz-transition: all .25s ease-in-out .25s; 
-webkit-transition: all 5s ease-in-out .25s;  
-ms-transition: all .25s ease-in-out .25s;  
-o-transition: all .25s ease-in-out .25s;  
transition: all .25s ease-in-out .25s;  
}

#foo.playing {
    width: 100px;
    height: 100px;
}

JavaScript

var f = document.getElementById('foo');
document.getElementById("play").addEventListener('click', function(ev){
    document.getElementById("foo").className='playing';
},false);    

document.getElementById("pause").addEventListener('click', function(ev){
    document.getElementById("foo").className='';
//    document.getElementById("foo").style.WebkitTransitionProperty='none';
},false);