CSS3 anim básica

auxiliar para [(SOPT) Show on Scroll Final](http://jsfiddle.net/brasofilo/gzzk5tq0/)

by brasofilo

HTML

<div class="box"><img width="326" height="150" src="http://dummyimage.com/384x250/23a343/edfcf7&text=Detect+scroll" /></div>
<button id="mostrar">mostrar</button>
<button id="esconder">esconder</button>

CSS

.box {
    position: fixed;
    width: 293px;
    bottom: 48px;
    right: -384px;
    z-index: 9999;
}
.display-block {
    right: 0px;
    visibility: visible;
}
.motionR{
    transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    right: 0px;
}

.motionL{
    transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    right: -343px;
}

JavaScript

$('#esconder').click(function () {
    $('.box').removeClass('motionR');
    $('.box').addClass('motionL');
});

$('#mostrar').click(function () {
    $('.box').removeClass('motionL');
    $('.box').addClass('motionR');
});