SOTB Transitions

by stopsatgreen

HTML

<div class="container" id="container1">
    <div id="one"></div>
    <div id="two"></div>
</div>
<div class="container" id="container2">
    <div class="tab" id="tab"></div>
</div>
<div class="container" id="container3">
    <div class="tab" id="tab2"></div>
</div>
<div id="spinner"></div>

CSS

div { height: 100px; width: 100px; }
.container { overflow: hidden; position: relative; }
#one, #two { left: 0; position: absolute; top: 0; -moz-transition: all 0.5s ease-in; }
#one { background-color: red; -moz-transform: scale(0); }
#two { background-color: rgba(0,255,0,0.33); }
#container1:hover #one { -moz-transform: scale(1); }
#container1:hover #two { -moz-transform: translateX(-100%); }
#tab { background-color: red; -moz-transform-origin: center bottom; -moz-transition: all 500ms ease-in; }
#container2:hover #tab { border-radius: 3px 3px 0 0; -moz-transform: scale(0.9) translateY(30%); }
#container2 #tab.close { opacity: 0; -moz-transform: rotate(45deg) scale(0.9) translate(100%,30%); }
@-moz-keyframes plop {
    to { opacity: 0; -moz-transform: rotate(45deg) scale(0.9) translate(100%,30%); }   
}
#tab2 { background-color: blue; border-radius: 3px 3px 0 0; -moz-transform: scale(0.9) translateY(30%); }
#tab2.close { -moz-animation: plop 500ms ease-in forwards; }
@-moz-keyframes spinner {
    from { background-position: 0 50%; }
    to { background-position: 100% 50%; }
}
#spinner { background: url('http://broken-links.com/tests/sotb2/images/loading_indicator.png') no-repeat 0 50%; height: 30px; overflow: hidden; width: 30px; -moz-animation: spinner 400ms steps(11) infinite; }

JavaScript

$('.tab').on('click',function(e) {
    $(e.currentTarget).addClass('close');
});
$('#container2,#container3').on('mouseleave',function(e) {
    $(e.currentTarget).find('.tab').removeClass('close');
});