I have a strange problem. I have flip CSS animation with two images.
The problem is that at the very first transition, the image that is hidden first does not translate well, but instead appears instantly at the end of the transition.
However, after the first transition, the problem disappears and works correctly after that.
Although the application is written in angularjs, I think this is a CSS issue. How can i solve this?
I created a fiddle that hopefully explains the 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);
}
source
share