CSS Transitions Test

by Douglas Ludlow

HTML

<div id="block" class="transform"></div>

CSS

#block
{
    margin: 150px auto;
    width: 150px;
    height: 150px;
    background-color: #f00;
    transition: all 1s;
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

#block.transform
{
    opacity: 0;
    transform: rotate(360deg) skew(30deg);
    background-color: #0f0;
    width: 0;
    height: 0;
}

JavaScript

(function() {
    var block = document.getElementById('block');
    
    block.className = '';
    
    block.onclick = function(e){
        this.className = 'transform';
        e.stopPropagation();
    };
    
    document.onclick = function() {
        block.className = '';
    };
})();