Flip a Card CSS3 Animation Tutorial

Display the Front then the Back of the Card


Turn Over a Card Example Prerequisite CSS3 Rotation Example with Tutorial Introduction 3D or 2.5D Animation Create CSS3 Animation Implement JavaScript Animation Tips and Issues Summary Full Source Code Page

Introduction

This tutorial explains how to use CSS3 animation to show the front then the back of a playing card. This article demonstrates animating a card as it turns over. Simulate 3D animation with CSS3 animation and JavaScript. The Turn Over a Card Example uses the front and back of a playing card. However use this effect with any graphics. Tap to transition from one image to the next with 2.5D animation.

This tutorial builds on the 3D Rotation Animation tutorial. See the 3D Rotation Animation example with tutorial, for the basics of CSS3 rotation animation.

CSS3 animations don't run on Internet Explorer 9. See JavaScript Image Rotation example, for animation which runs in Internet Explorer 9 and other older browsers.

3D or 2.5D Animation

The animation appears as if a card is being turned over. 2D animation which looks like 3D is called 2.5D.

To simulate rotation around the X axis of an Image, gradually decrease the height to zero, then gradually return to the full height. However, in this example JavaScript changes the graphic when the height equals zero pixels. The animation starts with the front of the card and ends with the back of the card.

Create CSS3 Animation

Define two CSS3 animations. The first animation reduces the height of the card from 192 pixels to 0 pixels. The second animation gradually increases the height from 0 pixels to 192 pixels. In between the two animations, JavaScript swaps the Image src and className values.

The fAnim forward animation reduces the height from 192 pixels to 0 pixels.

@keyframes fAnim
{
0% {
width:128px; 
height:192px;
}

100% {
width:128px; 
height:0px;
}      
}
	

The rAnim animation reverses the results of fAnim. Animation rAnim increases the height from 0 pixels to 192 pixels.

@keyframes rAnim
{   
0% {
width:128px; 
height:0px;
}
 
100% {
width:128px; 
height:192px; 
}
}	
	

Implement JavaScript Animation

The key to success with this short example involves swapping images at the right time. It was challenging to determine when the first animation ends, in order to start the second animation. This example creates a JavaScript interval with the same duration as the CSS3 animations. CSS3 animations run 3 seconds each, therefore JavaScript timers run three seconds with the code below.

JavaScript function animForward() assigns CSS3 animation fanim. JavaScript function animReverse() assigns CSS3 animation ranim.

function animForward(){

im.src = "../assets/king.gif"; 

im.className = "fanim";

im.style.animationPlayState = 'running';

im.style.webkitAnimationPlayState = 'running';

if (timer != null){

clearInterval(
 timer
);
   
}    
timer = setInterval(
  
 animReverse,

 3000

);     
}

function animReverse(){ 

im.src = "../assets/back.gif";
   
im.className = "ranim"; 

if (timer != null){

clearInterval(
 timer
);   
}  

timer = setInterval(
  
 animStopBoth,

 3000
);

}
	

A tap on the card calls JavaScript animForward(), which assigns the CSS3 foward animation named fanim, to the Image element's className property. Function animForward() also sets a timer to execute animReverse() when fanim has completed.

JavaScript function animReverse() assigns the back of the card to the image element's src property. Then animReverse() assigns the CSS3 reverse animation named ranim. Assign ranim to the Image element's className property. Function animReverse() initializes the timer to call animStopBoth() in 3000 milliseconds.

Function animStopBoth() resets everything. See the JavaScript for 2.5D Animation source code for details.

HTML5 for the Animation

Assign an on onclick event listener to the Image element targeted for animation. When the user taps the card, function animForward() begins the animation series. The following markup demonstrates assigning animForward() as the onclick event handler for the image element.

<div 

class="dCard"

>

<img 

id="im" 

src="../assets/king.gif" 

alt="King of Clubs: Card" 

onclick="animForward()"

/>

</div>

Tips and Issues

CSS3 Event Handlers

Apparently standards were written to fire event handlers when a CSS3 animation ends. For example the code below should assign the event listener animTimerEnd() to fire when the im element's CSS3 animation ends. Unfortunately animTimerEnd() never fired when testing. Tests included adding event listeners to the main document as well as the image element.

	
im.addEventListener(
 
// Webkit 
'webkitTransitionEnd', 

function(event) {
 
animTimerEnd();
 
}, 

false 

);

im.addEventListener(
 
// Firefox 

'transitionend', 

function(event) 
{ 

animTimerEnd(); 

}, 

false 
);

im.addEventListener( 

// Opera 
'oTransitionEnd',
 
function(event) 
{
 
animTimerEnd();
 
}, 

false 

);

im.addEventListener(
 
'MSTransitionEnd',
 
function( event ) {
 
animTimerEnd(); 

}, 

false 
);

This particular problem appeared a long time ago. Hopefully browsers have implemented more standardized code, since then.

Elements Move with the Animation

With fake rotation around the X axis, CSS3 decreases the image's height over time. HTML by default uses the extra space, allowing elements below the image to move into the image's vertical space during animation. The example source code places the card inside a div element with a fixed height. The CSS follows.

div.dCard {

 height:200px;
 
} 
	

The markup which maintains vertical space for the image element follows.

<div 

class="dCard"

>

<img 

id="im" 

src="../assets/king.gif" 

alt="King of Clubs: Card" 

onclick="animForward()"

/>

</div>

Summary

This tutorial explained how to use CSS3 animation to show the front then the back of a playing card. This article demonstrated animating a card as it turns over. Simulate 3D animation with CSS3 animation and JavaScript. The Turn Over a Card Example uses the front and back of a playing card. However use this effect with any graphics. Tap to transition from one image to the next with 2.5D animation.

This tutorial builds on the 3D Rotation Animation tutorial. See the 3D Rotation Animation example with tutorial, for the basics of CSS3 rotation animation.

CSS3 animations don't run on Internet Explorer 9. See JavaScript Image Rotation example, for animation which runs in Internet Explorer 9 and other older browsers.

See the Full Source Code Page or more HTML5 examples.

More HTML5 Examples

Sprite Sheet Animation
Copyright © 2015 Seven Thunder Software. All Rights Reserved.