CSS3卡翻转带关键帧不工作

动画结束后，在动画过程中设置的属性将消失。这是标准的工作方式。

要隐藏正面，您有两种可能性

1. 指定向前作为动画填充模式属性。使最后一个关键帧保持不变

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>

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

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

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

你需要告诉它不要重置，这可以通过传递动画迭代计数来实现：

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