CSS3卡片翻转w /关键帧不起作用

Question

This CSS3 Cardflip with Keyframes is almost working the way I want it except for one problem. The front face reappears after flipping over. The back face is transparent. That's the way I want it . You can see the below canvas when it flips over, but then it should stay flipped over. The front face reappears at the end of the animation and I can't figure out why?

  window.onload = function(){ var parent = document.getElementById("parent"); var parentWidth = parent.offsetWidth; var parentHeight = parent.offsetHeight; //belowCanvas var belowCanvas = document.getElementById('belowCanvas'); var belowCtx = belowCanvas.getContext('2d'); //canvas var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //blankCanvas var blankCanvas = document.getElementById('blankCanvas'); var blankCtx = blankCanvas.getContext('2d'); blankCanvas.width = canvas.width = belowCanvas.width = 170; blankCanvas.height = canvas.height = belowCanvas.height = 255; //card flip white ctx.rect(0,0,parentWidth,parentHeight); ctx.fillStyle = 'white'; ctx.fill(); window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); var card = document.getElementById('card'); setTimeout(function() { requestAnimFrame(function() { card.classList.add('flip'); }); }, 680); }; 

  #belowCanvas { position: absolute; width: 1000px; height: 600px; z-index: -1; background: rgb(254,255,232); /* Old browsers */ background: -moz-linear-gradient(top, rgba(254,255,232,1) 0%, rgba(214,219,191,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,232,1)), color-stop(100%,rgba(214,219,191,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 ); /* IE6-9 */ } #parent { width: 1000px; height: 600px; border: 1px solid black; } .container{ position: relative; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; width: 170px; height: 255px; top: 50%; left: 50%; transform: translate(-50%, -50%); } #card{ width: 100%; height: 100%; transform-style: preserve-3d; position: relative; border: 1px solid black; } .front, .back{ width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } #card .back { transform: rotateY(-180deg); } .flip{ -webkit-animation: flipCard 1s; } @-webkit-keyframes flipCard { 0% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -webkit-transform: scale(1) rotateY(0deg); } 10% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -webkit-transform: scale(1.000768) rotateY(0deg); } 20% { box-shadow: 0px 4.112960000000001px 4.112960000000001px rgba(0,0,0,0.3); -webkit-transform: scale(1.024576) rotateY(0deg); } 30% { box-shadow: 0px 16.88704px 16.88704px rgba(0,0,0,0.3); -webkit-transform: scale(1.125424) rotateY(0.17135717260665195deg); } 40% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -webkit-transform: scale(1.149232) rotateY(5.4834295234128625deg); } 50% { box-shadow: 0px 20px 20px rgba(0,0,0,0.3); -webkit-transform: scale(1.15) rotateY(41.639792943416424deg); } 60% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -webkit-transform: scale(1.149232) rotateY(138.36020705658356deg); } 70% { box-shadow: 0px 16.887040000000006px 16.887040000000006px rgba(0,0,0,0.3); -webkit-transform: scale(1.125424) rotateY(174.51657047658713deg); } 80% { box-shadow: 0px 4.112959999999997px 4.112959999999997px rgba(0,0,0,0.3); -webkit-transform: scale(1.024576) rotateY(179.82864282739334deg); } 90% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -webkit-transform: scale(1.000768) rotateY(180deg); } 100% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -webkit-transform: scale(1) rotateY(180deg); } } @-moz-keyframes flipCard { 0% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -moz-transform: scale(1) rotateY(0deg); } 10% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -moz-transform: scale(1.000768) rotateY(0deg); } 20% { box-shadow: 0px 4.112960000000001px 4.112960000000001px rgba(0,0,0,0.3); -moz-transform: scale(1.024576) rotateY(0deg); } 30% { box-shadow: 0px 16.88704px 16.88704px rgba(0,0,0,0.3); -moz-transform: scale(1.125424) rotateY(0.17135717260665195deg); } 40% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -moz-transform: scale(1.149232) rotateY(5.4834295234128625deg); } 50% { box-shadow: 0px 20px 20px rgba(0,0,0,0.3); -moz-transform: scale(1.15) rotateY(41.639792943416424deg); } 60% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -moz-transform: scale(1.149232) rotateY(138.36020705658356deg); } 70% { box-shadow: 0px 16.887040000000006px 16.887040000000006px rgba(0,0,0,0.3); -moz-transform: scale(1.125424) rotateY(174.51657047658713deg); } 80% { box-shadow: 0px 4.112959999999997px 4.112959999999997px rgba(0,0,0,0.3); -moz-transform: scale(1.024576) rotateY(179.82864282739334deg); } 90% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -moz-transform: scale(1.000768) rotateY(180deg); } 100% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -moz-transform: scale(1) rotateY(180deg); } } @-ms-keyframes flipCard { 0% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -ms-transform: scale(1) rotateY(0deg); } 10% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -ms-transform: scale(1.000768) rotateY(0deg); } 20% { box-shadow: 0px 4.112960000000001px 4.112960000000001px rgba(0,0,0,0.3); -ms-transform: scale(1.024576) rotateY(0deg); } 30% { box-shadow: 0px 16.88704px 16.88704px rgba(0,0,0,0.3); -ms-transform: scale(1.125424) rotateY(0.17135717260665195deg); } 40% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -ms-transform: scale(1.149232) rotateY(5.4834295234128625deg); } 50% { box-shadow: 0px 20px 20px rgba(0,0,0,0.3); -ms-transform: scale(1.15) rotateY(41.639792943416424deg); } 60% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -ms-transform: scale(1.149232) rotateY(138.36020705658356deg); } 70% { box-shadow: 0px 16.887040000000006px 16.887040000000006px rgba(0,0,0,0.3); -ms-transform: scale(1.125424) rotateY(174.51657047658713deg); } 80% { box-shadow: 0px 4.112959999999997px 4.112959999999997px rgba(0,0,0,0.3); -ms-transform: scale(1.024576) rotateY(179.82864282739334deg); } 90% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -ms-transform: scale(1.000768) rotateY(180deg); } 100% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -ms-transform: scale(1) rotateY(180deg); } } @-o-keyframes flipCard { 0% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -o-transform: scale(1) rotateY(0deg); } 10% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -o-transform: scale(1.000768) rotateY(0deg); } 20% { box-shadow: 0px 4.112960000000001px 4.112960000000001px rgba(0,0,0,0.3); -o-transform: scale(1.024576) rotateY(0deg); } 30% { box-shadow: 0px 16.88704px 16.88704px rgba(0,0,0,0.3); -o-transform: scale(1.125424) rotateY(0.17135717260665195deg); } 40% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -o-transform: scale(1.149232) rotateY(5.4834295234128625deg); } 50% { box-shadow: 0px 20px 20px rgba(0,0,0,0.3); -o-transform: scale(1.15) rotateY(41.639792943416424deg); } 60% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -o-transform: scale(1.149232) rotateY(138.36020705658356deg); } 70% { box-shadow: 0px 16.887040000000006px 16.887040000000006px rgba(0,0,0,0.3); -o-transform: scale(1.125424) rotateY(174.51657047658713deg); } 80% { box-shadow: 0px 4.112959999999997px 4.112959999999997px rgba(0,0,0,0.3); -o-transform: scale(1.024576) rotateY(179.82864282739334deg); } 90% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -o-transform: scale(1.000768) rotateY(180deg); } 100% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -o-transform: scale(1) rotateY(180deg); } } @keyframes flipCard { 0% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); transform: scale(1) rotateY(0deg); } 10% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); transform: scale(1.000768) rotateY(0deg); } 20% { box-shadow: 0px 4.112960000000001px 4.112960000000001px rgba(0,0,0,0.3); transform: scale(1.024576) rotateY(0deg); } 30% { box-shadow: 0px 16.88704px 16.88704px rgba(0,0,0,0.3); transform: scale(1.125424) rotateY(0.17135717260665195deg); } 40% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); transform: scale(1.149232) rotateY(5.4834295234128625deg); } 50% { box-shadow: 0px 20px 20px rgba(0,0,0,0.3); transform: scale(1.15) rotateY(41.639792943416424deg); } 60% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); transform: scale(1.149232) rotateY(138.36020705658356deg); } 70% { box-shadow: 0px 16.887040000000006px 16.887040000000006px rgba(0,0,0,0.3); transform: scale(1.125424) rotateY(174.51657047658713deg); } 80% { box-shadow: 0px 4.112959999999997px 4.112959999999997px rgba(0,0,0,0.3); transform: scale(1.024576) rotateY(179.82864282739334deg); } 90% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); transform: scale(1.000768) rotateY(180deg); } 100% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); transform: scale(1) rotateY(180deg); } } 

  <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Title</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> <script type="text/javascript" src="patternizer.js"></script> </head> <body> <div id="parent"> <canvas id="belowCanvas"></canvas> <div class="container"> <div id="card"> <div class="front"> <canvas id="canvas"></canvas> </div> <div class="back"> <canvas id="blankCanvas"></canvas> </div> </div> </div> </div> </body> </html> 

Answer 1

you forgot to add perspective: 1000px; on #parent .

Answer 2

Your CSS animation call looks like this:

.flip{ -webkit-animation: flipCard 1s; }

You need to tell it not to reset, which you can do by passing an animation iteration count :

.flip{ -webkit-animation: flipCard 1s 1; }

Answer 3

The properties that you set during the animation disappear once the animation is over. That is the standard way of working.

To leave the front face hidden, you have 2 posibilities

1. Specify forwards as the animation-fill-mode property. that makes the last keyframe stay

2. Set the properties that you want to stay in the final class ( my favourite ). In your case, the flip class

    .flip{ -webkit-animation: flipCard 1s; transform: rotateY(180deg); } 

  window.onload = function(){ var parent = document.getElementById("parent"); var parentWidth = parent.offsetWidth; var parentHeight = parent.offsetHeight; //belowCanvas var belowCanvas = document.getElementById('belowCanvas'); var belowCtx = belowCanvas.getContext('2d'); //canvas var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //blankCanvas var blankCanvas = document.getElementById('blankCanvas'); var blankCtx = blankCanvas.getContext('2d'); blankCanvas.width = canvas.width = belowCanvas.width = 170; blankCanvas.height = canvas.height = belowCanvas.height = 255; //card flip white ctx.rect(0,0,parentWidth,parentHeight); ctx.fillStyle = 'white'; ctx.fill(); window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); var card = document.getElementById('card'); setTimeout(function() { requestAnimFrame(function() { card.classList.add('flip'); }); }, 680); }; 

  #belowCanvas { position: absolute; width: 1000px; height: 600px; z-index: -1; background: rgb(254,255,232); /* Old browsers */ background: -moz-linear-gradient(top, rgba(254,255,232,1) 0%, rgba(214,219,191,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,232,1)), color-stop(100%,rgba(214,219,191,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 ); /* IE6-9 */ } #parent { width: 1000px; height: 600px; border: 1px solid black; } .container{ position: relative; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; width: 170px; height: 255px; top: 50%; left: 50%; transform: translate(-50%, -50%); } #card{ width: 100%; height: 100%; transform-style: preserve-3d; position: relative; border: 1px solid black; } .front, .back{ width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } #card .back { transform: rotateY(-180deg); } .flip{ -webkit-animation: flipCard 1s; transform: rotateY(180deg); } @-webkit-keyframes flipCard { 0% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -webkit-transform: scale(1) rotateY(0deg); } 10% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -webkit-transform: scale(1.000768) rotateY(0deg); } 20% { box-shadow: 0px 4.112960000000001px 4.112960000000001px rgba(0,0,0,0.3); -webkit-transform: scale(1.024576) rotateY(0deg); } 30% { box-shadow: 0px 16.88704px 16.88704px rgba(0,0,0,0.3); -webkit-transform: scale(1.125424) rotateY(0.17135717260665195deg); } 40% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -webkit-transform: scale(1.149232) rotateY(5.4834295234128625deg); } 50% { box-shadow: 0px 20px 20px rgba(0,0,0,0.3); -webkit-transform: scale(1.15) rotateY(41.639792943416424deg); } 60% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -webkit-transform: scale(1.149232) rotateY(138.36020705658356deg); } 70% { box-shadow: 0px 16.887040000000006px 16.887040000000006px rgba(0,0,0,0.3); -webkit-transform: scale(1.125424) rotateY(174.51657047658713deg); } 80% { box-shadow: 0px 4.112959999999997px 4.112959999999997px rgba(0,0,0,0.3); -webkit-transform: scale(1.024576) rotateY(179.82864282739334deg); } 90% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -webkit-transform: scale(1.000768) rotateY(180deg); } 100% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -webkit-transform: scale(1) rotateY(180deg); } } @-moz-keyframes flipCard { 0% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -moz-transform: scale(1) rotateY(0deg); } 10% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -moz-transform: scale(1.000768) rotateY(0deg); } 20% { box-shadow: 0px 4.112960000000001px 4.112960000000001px rgba(0,0,0,0.3); -moz-transform: scale(1.024576) rotateY(0deg); } 30% { box-shadow: 0px 16.88704px 16.88704px rgba(0,0,0,0.3); -moz-transform: scale(1.125424) rotateY(0.17135717260665195deg); } 40% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -moz-transform: scale(1.149232) rotateY(5.4834295234128625deg); } 50% { box-shadow: 0px 20px 20px rgba(0,0,0,0.3); -moz-transform: scale(1.15) rotateY(41.639792943416424deg); } 60% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -moz-transform: scale(1.149232) rotateY(138.36020705658356deg); } 70% { box-shadow: 0px 16.887040000000006px 16.887040000000006px rgba(0,0,0,0.3); -moz-transform: scale(1.125424) rotateY(174.51657047658713deg); } 80% { box-shadow: 0px 4.112959999999997px 4.112959999999997px rgba(0,0,0,0.3); -moz-transform: scale(1.024576) rotateY(179.82864282739334deg); } 90% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -moz-transform: scale(1.000768) rotateY(180deg); } 100% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -moz-transform: scale(1) rotateY(180deg); } } @-ms-keyframes flipCard { 0% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -ms-transform: scale(1) rotateY(0deg); } 10% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -ms-transform: scale(1.000768) rotateY(0deg); } 20% { box-shadow: 0px 4.112960000000001px 4.112960000000001px rgba(0,0,0,0.3); -ms-transform: scale(1.024576) rotateY(0deg); } 30% { box-shadow: 0px 16.88704px 16.88704px rgba(0,0,0,0.3); -ms-transform: scale(1.125424) rotateY(0.17135717260665195deg); } 40% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -ms-transform: scale(1.149232) rotateY(5.4834295234128625deg); } 50% { box-shadow: 0px 20px 20px rgba(0,0,0,0.3); -ms-transform: scale(1.15) rotateY(41.639792943416424deg); } 60% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -ms-transform: scale(1.149232) rotateY(138.36020705658356deg); } 70% { box-shadow: 0px 16.887040000000006px 16.887040000000006px rgba(0,0,0,0.3); -ms-transform: scale(1.125424) rotateY(174.51657047658713deg); } 80% { box-shadow: 0px 4.112959999999997px 4.112959999999997px rgba(0,0,0,0.3); -ms-transform: scale(1.024576) rotateY(179.82864282739334deg); } 90% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -ms-transform: scale(1.000768) rotateY(180deg); } 100% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -ms-transform: scale(1) rotateY(180deg); } } @-o-keyframes flipCard { 0% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -o-transform: scale(1) rotateY(0deg); } 10% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -o-transform: scale(1.000768) rotateY(0deg); } 20% { box-shadow: 0px 4.112960000000001px 4.112960000000001px rgba(0,0,0,0.3); -o-transform: scale(1.024576) rotateY(0deg); } 30% { box-shadow: 0px 16.88704px 16.88704px rgba(0,0,0,0.3); -o-transform: scale(1.125424) rotateY(0.17135717260665195deg); } 40% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -o-transform: scale(1.149232) rotateY(5.4834295234128625deg); } 50% { box-shadow: 0px 20px 20px rgba(0,0,0,0.3); -o-transform: scale(1.15) rotateY(41.639792943416424deg); } 60% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); -o-transform: scale(1.149232) rotateY(138.36020705658356deg); } 70% { box-shadow: 0px 16.887040000000006px 16.887040000000006px rgba(0,0,0,0.3); -o-transform: scale(1.125424) rotateY(174.51657047658713deg); } 80% { box-shadow: 0px 4.112959999999997px 4.112959999999997px rgba(0,0,0,0.3); -o-transform: scale(1.024576) rotateY(179.82864282739334deg); } 90% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); -o-transform: scale(1.000768) rotateY(180deg); } 100% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); -o-transform: scale(1) rotateY(180deg); } } @keyframes flipCard { 0% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); transform: scale(1) rotateY(0deg); } 10% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); transform: scale(1.000768) rotateY(0deg); } 20% { box-shadow: 0px 4.112960000000001px 4.112960000000001px rgba(0,0,0,0.3); transform: scale(1.024576) rotateY(0deg); } 30% { box-shadow: 0px 16.88704px 16.88704px rgba(0,0,0,0.3); transform: scale(1.125424) rotateY(0.17135717260665195deg); } 40% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); transform: scale(1.149232) rotateY(5.4834295234128625deg); } 50% { box-shadow: 0px 20px 20px rgba(0,0,0,0.3); transform: scale(1.15) rotateY(41.639792943416424deg); } 60% { box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3); transform: scale(1.149232) rotateY(138.36020705658356deg); } 70% { box-shadow: 0px 16.887040000000006px 16.887040000000006px rgba(0,0,0,0.3); transform: scale(1.125424) rotateY(174.51657047658713deg); } 80% { box-shadow: 0px 4.112959999999997px 4.112959999999997px rgba(0,0,0,0.3); transform: scale(1.024576) rotateY(179.82864282739334deg); } 90% { box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3); transform: scale(1.000768) rotateY(180deg); } 100% { box-shadow: 0px 1px 1px rgba(0,0,0,0.3); transform: scale(1) rotateY(180deg); } } 

  <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Title</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> <script type="text/javascript" src="patternizer.js"></script> </head> <body> <div id="parent"> <canvas id="belowCanvas"></canvas> <div class="container"> <div id="card"> <div class="front"> <canvas id="canvas"></canvas> </div> <div class="back"> <canvas id="blankCanvas"></canvas> </div> </div> </div> </div> </body> </html>