<div class="credit-card">
<div class="front animate">
<i class="box"></i>
<i class="logo"></i>
<span class="number">0000 0000 0000 0000</span>
</div>
<div class="back">
<i class="scan"></i>
<i class="info"></i>
</div>
</div>
$purple: #663554;
$lightpurple: #b38570;
$gold: #ffd58c;
$highlight: #6d5e46;
$time: 3.4;
/**********************
GENERAL STYLING
**********************/
body {
font-family: 'Verdana', sans-serif;
padding: 0;
margin: 0;
background: #ff7b4a;
}
.credit-card {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: flip $time+s infinite linear;
}
@keyframes flip {
from {
transform: rotateY( 0deg );
}
to {
transform: rotateY( 360deg );
}
}
.front, .back {
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 50px);
display: block;
width: 100px;
height: 60px;
border-radius: 5px;
backface-visibility: hidden;
background: $purple;
}
/**********************
FRONT OF CARD
**********************/
.front {
transform: translate3d(0,0,0); // fixes absolute position
}
.box {
position: absolute;
top: 10px;
left: 6px;
display: block;
width: 19px;
height: 15px;
border-radius: 2px;
background: $gold;
transform-origin: 0;
transform: scaleX(0);
&:after {
content: '';
display: block;
width: 1px;
height: 1px;
box-shadow:
// Top Left Box
9px 0 $purple,
9px 1px $purple,
9px 2px $purple,
0 3px $purple,
1px 3px $purple,
2px 3px $purple,
3px 3px $purple,
4px 3px $purple,
5px 3px $purple,
6px 3px $purple,
7px 3px $purple,
8px 3px $purple,
9px 3px $purple,
// Middle Line
4px 4px $purple,
4px 5px $purple,
4px 6px $purple,
// Top Right Box
13px 0 $purple,
13px 1px $purple,
13px 2px $purple,
13px 3px $purple,
13px 4px $purple,
13px 5px $purple,
13px 6px $purple,
13px 7px $purple,
14px 7px $purple,
15px 7px $purple,
16px 7px $purple,
17px 7px $purple,
18px 7px $purple,
// Bottom Left Box
0 7px $purple,
1px 7px $purple,
2px 7px $purple,
3px 7px $purple,
4px 7px $purple,
5px 7px $purple,
6px 7px $purple,
7px 7px $purple,
8px 7px $purple,
9px 7px $purple,
9px 8px $purple,
9px 9px $purple,
9px 10px $purple,
9px 11px $purple,
9px 12px $purple,
9px 13px $purple,
9px 14px $purple,
9px 15px $purple,
// Bottom Right Box
18px 11px $purple,
17px 11px $purple,
16px 11px $purple,
15px 11px $purple,
14px 11px $purple,
13px 11px $purple,
12px 11px $purple,
11px 11px $purple,
10px 11px $purple,
9px 11px $purple,
8px 11px $purple,
7px 11px $purple,
6px 11px $purple,
5px 11px $purple,
4px 11px $purple,
4px 12px $purple,
4px 13px $purple,
4px 14px $purple,
4px 15px $purple,
}
}
@keyframes scaleBox {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.logo {
position: absolute;
top: 10px;
right: 6px;
display: block;
width: 17px;
height: 17px;
border-radius: 50%;
&:before {
content: '';
@extend .logo;
top: 0;
right: 8px;
background: $lightpurple;
transform: scale(0);
}
&:after {
content: '';
@extend .logo;
top: 0;
right: 10px;
background: $gold;
transform: scale(0);
}
}
@keyframes scaleLogo {
0% {
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes scaleLogo2 {
0% {
transform: scale(0) translate(0);
}
50% {
transform: scale(1.1) translate(5px);
}
100% {
transform: scale(1) translate(8px);
}
}
.number {
position: absolute;
bottom: 12px;
right: 6px;
font-size: 8px;
color: $gold;
&:after {
content: '';
position: absolute;
top: 0;
left: -2px;
display: block;
width: 94px;
height: 9px;
background: $purple;
transform-origin: 94px;
transform: scaleX(1);
}
}
@keyframes scaleNumber {
from {
transform: skew(30deg) scaleX(1);
}
to {
transform: skew(30deg) scaleX(0);
}
}
/**********************
BACK OF CARD
**********************/
.back {
transform: rotateY( 180deg ) translate3d(0,0,0);
}
.scan {
position: absolute;
top: 10px;
display: block;
width: 100px;
height: 13px;
overflow: hidden;
background: #000;
transform-origin: 0;
transform: scale(0);
// Highlight
&:after {
content: '';
display: block;
width: 5px;
height: 100%;
background: $highlight;
box-shadow:
10px 0 $highlight,
14px 0 $highlight,
25px 0 $highlight;
transform: skewX(-40deg) translate(110px);
}
}
@keyframes highlight {
from {
transform: skewX(-40deg) translate(-35px);
}
to {
transform: skewX(-40deg) translate(110px);
}
}
.info {
position: absolute;
left: 6px;
bottom: 16px;
display: block;
width: 38px;
height: 10px;
background: $gold;
transform-origin: 0;
transform: scale(0);
&:after {
content: '';
@extend .info;
top: 0;
left: 44px;
width: 16px;
}
}
.animate {
.box {
animation: scaleBox ($time/7)+s forwards;
}
.logo {
&:before {
animation: scaleLogo2 ($time/7)+s .15s forwards;
}
&:after {
animation: scaleLogo ($time/7)+s forwards;
}
}
.number:after {
animation: scaleNumber 1s forwards;
}
.scan {
animation: scaleBox .5s forwards;
&:after {
animation: highlight 1.75s forwards;
}
}
.info {
animation: scaleBox 1s forwards;
&:after {
animation: scaleBox 1s .6s forwards;
}
}
}
View Compiled
function toggleClasses() {
$('.front').toggleClass('animate');
$('.back').toggleClass('animate');
}
setTimeout(function() {
toggleClasses();
setInterval(function() {
toggleClasses();
}, 3400/2);
}, 3400/4);
This Pen doesn't use any external CSS resources.