Bounce with Transitions

by paulrouget

HTML

<strong>Bounce effect with transitions only</strong>
 - <em>(Won't work in Chrome. Webkit doesn't support bezier
    curve values > 1)</em>.
<br/>
<button onclick="mopmop()">click</button>

<div></div>

CSS

.yo div {
    margin-left: 300px;
    width: 75px; height: 75px;
}

div {
    background-color: black;
    width: 50px; height: 50px;
    margin: 100px;
    
    transition: 0.75s;
    transition-timing-function: cubic-bezier(0.5, 0.1, 0.7, 1.5);
 
     /* prefix!!! */   
    -moz-transition: 0.75s;-webkit-transition: 0.75s;
    -o-transition: 0.75s;-ms-transition: 0.75s;
    -moz-transition-timing-function: cubic-bezier(0.5, 0.1, 0.7, 1.5);
    -webkit-transition-timing-function: cubic-bezier(0.5, 0.1, 0.7, 1.5);
    -o-transition-timing-function: cubic-bezier(0.5, 0.1, 0.7, 1.5);
    -ms-transition-timing-function: cubic-bezier(0.5, 0.1, 0.7, 1.5);
}

JavaScript

window.mopmop = function() {
    document.body.classList.toggle("yo");
}