CODEWITHSUNDEEP
htmlcsscss-animations
ibanore
ibanore

Reputation: 1500

Flipping card, image on back card slow to appear on first flip

I'm playing around with CSS 3D animations and I've hit a strange problem.

What I'm doing

Created a card which has two sides, front and back, both images.

Problem

The first time the card flips to show the back card it does not do it smoothly, you see the first card spinning around and then you see nothing for a split second and then the back card just snaps into view.

Weird

It's only the first flip that's wrong, all other flips after it look smooth and exactly what I'm looking for.

What I thought the problem might be

That the back image was not loaded yet by the time the first flip happened. I tried to preload the image with JS but it did nothing.

JSFIDDLE

http://jsfiddle.net/mz49d/

It's very annoying and I'd like to hear anyway I can fix this. I've even thrown in every vendor prefix in the CSS but it changed nothing.

EDIT

I just tested it in FF30 and it seems to work. It does not work in my Chrome 36.0.1985.125.

Upvotes: 3

Views: 1545

Answers (1)

Kablam
Kablam

Reputation: 2591

It looks like putting the images as css-background-images works in Chrome and FF.

Not sure if there are any drawbacks to using this method on other parts of your project though...

HTML

<div id="card">
    <div class="card-side front-card"></div>
    <div class="card-side back-card"></div> 
</div>

CSS

.front-card {
    background: url(http://images.wisegeek.com/planet-earth.jpg);
}
.back-card {
    background: url(http://haughtonmarsproject.com/wp-content/uploads/2013/11/Mars-1-Project.jpg);
}

Upvotes: 2

Related Questions