CSS3 animation testing

by tnhu

HTML

<div class="card">
    <p>Urna etiam lacus lorem parturient odio cursus nisi ultrices! Aenean massa nunc, elementum habitasse odio, enim urna aenean, ac et cum integer? Rhoncus in urna etiam vut duis. Aliquet! Turpis, scelerisque nunc! A rhoncus turpis? Est, dis turpis tincidunt etiam pellentesque sociis rhoncus tincidunt, magnis! Lundium habitasse amet mus.</p>        
</div>

<button>Toggle animation</button>

CSS

.card {
    position          : absolute;
    top               : 0; left: 0; bottom: 0; right: 0;
    border            : 1px solid #666;
    background-color  : #efefef;
    color             : #333;
    margin            : auto;
    padding           : 10px;
    width             : 300px; height: 180px;
    overflow          : hidden;
}

.card.animated p {
    -webkit-transform: translate(-40px, 0px);
    -moz-transform: translate(-40px, 0px);
    -o-transform: translate(-40px, 0px);
    transform: translate(-40px, 0px);
    
    opacity: 0;
    
    -webkit-animation : cardShowingEffect 0.75s ease forwards;
    -moz-animation    : cardShowingEffect 0.75s ease forwards;
    -o-animation      : cardShowingEffect 0.75s ease forwards;
    animation         : cardShowingEffect 0.75s ease forwards;
}

@keyframes cardShowingEffect {
    to { 
        transform: translateX(0); 
        opacity: 1; 
    }
}

@-webkit-keyframes cardShowingEffect {
    to { 
        -webkit-transform: translateX(0); 
        opacity: 1; 
    }
}

@-moz-keyframes cardShowingEffect {
    to { 
        -moz-transform: translateX(0); 
        opacity: 1; 
    }
}

JavaScript

$('button').click(function() {
    $('.card').toggleClass('animated');
});