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

Question

这个带有关键帧的CSS3 Cardflip几乎按照我想要的方式工作，除了一个问题。 翻转后，正面重新出现。 背面是透明的。 这就是我想要的方式。 当它翻转时你可以看到下面的画布，但它应该保持翻转。 前脸在动画结束时重新出现，我无法弄清楚为什么？

  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

你忘记添加perspective: 1000px; 在#parent 。

Answer 2

您的CSS动画调用如下所示：

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

您需要告诉它不要重置，您可以通过传递动画迭代计数来执行 ：

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

Answer 3

动画结束后，动画期间设置的属性将消失。 这是标准的工作方式。

要隐藏正面，你有2个可能性

1. 将前向指定为animation-fill-mode属性。 这使得最后一个关键帧保持不变

2. 设置要保留在最终课程中的属性（ 我最喜欢的 ）。 在你的情况下， 翻转类

    .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>