angularjs - CSS transition not correctly working -

angularjs - CSS transition not correctly working -

i have weird problem. have css flip animation 2 images.

the problem on first transition, image hidden first not transition instead shows instantly @ end of transition.

however, after first transition problem disappears , working correctly afterwards.

though application written in angularjs, think css problem. how solve this?

i've created fiddle explains problem:

fiddle

html:

<table> <tr> <td ng-click="flipcard()"> <div class="card-container"> <div class="card" ng-class="{'flipped': !deckvisible}"> <img class="front" ng-src="http://dummyimage.com/128x96/000/fff.jpg&text=3"> <img class="back" ng-src="http://dummyimage.com/128x96/000/fff.jpg&text=5"> </div> </div> </td> </tr> </table>

css:

.card-container { position: relative; width: 220px; height: 147px; -webkit-perspective: 800px; -moz-perspective: 800px; -ms-perspective: 800px; -o-perspective: 800px; perspective: 800px; } .card { width: 100%; height: 100%; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -ms-transition: -ms-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .card.flipped { -webkit-transform: rotatey(180deg); -moz-transform: rotatey(180deg); -ms-transform: rotatey(180deg); -o-transform: rotatey(180deg); transform: rotatey(180deg); } .card img { position: absolute; display: block; height: 100%; width: 100%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .card .back { -webkit-transform: rotatey(180deg); -moz-transform: rotatey(180deg); -ms-transform: rotatey(180deg); -o-transform: rotatey(180deg); transform: rotatey(180deg); }

demo

.card .back { -webkit-transform: rotatey(180deg); -moz-transform: rotatey(180deg); -ms-transform: rotatey(180deg); -o-transform: rotatey(180deg); transform: rotatey(180deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }

you forgot set preserve-3d in image

css angularjs css3 css-animations