CSS3 Swipe Card Animation

A while ago, I came across designing a kiosk web application for one of my clients. Since it is a web application so I think I should utilise the features of HTML5 and CSS3. Well, as usual, I started to do some researches about the animation functions of CSS3. I read the guide from Mozilla and other useful articles such as CSS-Tricks, W3Schools and CSS3 Please. I have to admit that CSS3 really makes a developer's job easier on animations. I don't need to write a single code on Javascript and I still can make a good animation.

Anyway, one of the key features of this project is to indicate the patient/customer how to swipe the card when they look at the screen of the kiosk. Instead of reading the boring descriptions, a easy-to-understand animation would guide the patient to swipe the card correctly and properly. This sample code was inspired by Ben Everard's post on Github. It was all I needed to start decorating the layout of the swiping card screen.


In order to make it work, all you need is the below three images and the CSS3 code. You can design the images in Photoshop or Gimp or any other image editor.

1. The kiosk image with left part of magnetic stripe reader
2. The card with the face toward to the user
3. The right part of the magnetic reader

When the three images are ready, you can place the CSS3 code in your HTML file. You may need some adjustments which are "keyframes". You need to adjust the position of the animation start and end (top & left values) positions to fit your desired layout of your project. You may also need to adjust the positions of the three images.

Anyway, I have a sample animation at the end of this article which is applied by the sample code below.

Happy coding and have fun.

CSS3 Code:

@-webkit-keyframes swipe-card{
 0%{top:0px;opacity:0;} 
 10%,50%{top:0px;left:350px;opacity:1;} 
 65%{top:270px;left:380px;opacity:1;} 
 75%,100%{top:260px;left:380px;opacity:0;}
}

@-moz-keyframes swipe-card{
 0%{top:0px;opacity:0;} 
 10%,50%{top:0px;left:350px;opacity:1;} 
 65%{top:270px;left:380px;opacity:1;} 
 75%,100%{top:260px;left:380px;opacity:0;}
}

@-ms-keyframes swipe-card{
 0%{top:0px;opacity:0;} 
 10%,50%{top:0px;left:350px;opacity:1;} 
 65%{top:270px;left:380px;opacity:1;} 
 75%,100%{top:260px;left:380px;opacity:0;}
}

.swipe-card{
 margin:auto;
 position:relative;
 display:block;
 width:600px;
 height:600px;
}

.swipe-card img{
 position:absolute;
}

.swipe-card .swipe-left{
 top:70px;
 left:0px;
 z-index:3;
}

.swipe-card .swipe-right{
 top:115px;
 left:382px;
 z-index:1;
}

.swipe-card .card{
 z-index:2;
 left:390px;
 top:90px;
 -webkit-animation:swipe-card 4s ease-in-out infinite normal;
 -moz-animation:swipe-card 4s ease-in-out infinite normal;
 -ms-animation:swipe-card 4s ease-in-out infinite normal;
 animation:swipe-card 4s ease-in-out infinite normal;
}

Html Code:

<div class="kiosk">
  <div class="swipe-card">
    <img class="swipe-left" src="your_image_path/kiosk-left.png" />
    <img class="card" src="your_image_path/med-card-front-swipe.png" />
    <img class="swipe-right" src="your_image_path/kiosk-right.png" />
  </div>
</div>

Demo Animation: