css3 - CSS Animation: how to trigger the reverse animation? -

css3 - CSS Animation: how to trigger the reverse animation? -

i'm trying create simple reusable css class can have animation everywhere.

everything works fine except can't find example/documentation on how trigger reverse animation.

here html:

<div class="cards"> <div class="card"> <div class="frontpage"> <img src="http://lorempixel.com/400/200/"/> </div> <div class="rearpage"> <img src="http://lorempixel.com/g/400/200/"/> </div> </div> <div class="card"> <div class="frontpage"> <img src="http://lorempixel.com/400/200/"/> </div> <div class="rearpage"> <img src="http://lorempixel.com/g/400/200/"/> </div> </div> </div>

my animation "card-flip"-like animation using simple toggleclass in javascript trigger animation:

$('.card').click(function(){ $(this).toggleclass('opened'); });

and here css:

.cards { width: 800px; margin: auto; } .card { width: 200px; height: 100px; position: relative; display: inline-block; margin: 10px; } .card .frontpage, .card .rearpage { width: 100%; height: 100%; overflow: hidden; position: absolute; } .card .rearpage { width: 0%; } .card .frontpage img, .card .rearpage img { width: 100%; height: 100%; } /***** animations *****/ /* animation 1 */ .card .frontpage { -webkit-animation-duration: 1s; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in; -webkit-animation-fill-mode: forwards; } .card.opened .frontpage { -webkit-animation-name: fronttorear; } @-webkit-keyframes fronttorear { 0% { width: 100%; } 50% { width: 0%; margin-left: 50%; } 100% { width: 0%; } } /* animation 2 */ .card .rearpage { -webkit-animation-duration: 1s; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in; -webkit-animation-fill-mode: forwards; } .card.opened .rearpage { -webkit-animation-name: reartofront; } @-webkit-keyframes reartofront { 0% { width: 0%; } 50% { width: 0%; margin-left: 50%; } 100% { width: 100%; } }

what smart way of doing this? wish set trigger on .rearcard trigger reversed animation can't find way of doing this.

i know write 2 other "reversed" animations , apply them seems dumb can't seek better.

i set jsfiddle help analyze , test out: http://jsfiddle.net/9yp3u/

your approach margin , width false rotation interesting, can much more rotatey

.cards { width: 800px; margin:auto; -webkit-perspective:1000; } .card { width: 200px; height: 100px; position: relative; display: inline-block; margin: 10px; -webkit-transition: 1s ease-in; -webkit-transform-style: preserve-3d; -webkit-transform:translatez(1px); } .card .frontpage, .card .rearpage, img { width: 100%; height: 100%; position: absolute; top:0; left:0; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; } .card img { width: 100%; height: 100%; } .card .rearpage, .card.opened { -webkit-transform:rotatey(180deg); }

demo

as question asked, can play animations backwards using animation-direction:backwards property, though css toggling animations is hard. thus, i'd recommend utilize transition instead since it's alter between 2 states.

and fyi in case, css selector don't have in parent child format. in case applying .child same. parent child selector necessary when needing higher selector specificity existing properties.

oh, , fyi, jquery isn't needed this. included (untested) javascript equivalent if want. if place you're using jquery on page i'd recommend not using because loading whole jquery library takes time , data.

css3 animation css-animations