diff --git a/css/style-1.css b/css/style-1.css
index eae2498d..e43a17e9 100644
--- a/css/style-1.css
+++ b/css/style-1.css
@@ -398,6 +398,31 @@ textarea.input {
 
 
 
+/*Animated cards*/
+.animated-scene {
+	perspective: 100rem;
+}
+.animated-card-1 {
+	animation: animatedcardone 3s ease-in-out 0s alternate infinite;
+	-moz-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
+	-webkit-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
+	-o-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
+	transform-style: preserve-3d;
+}
+.animation-delay-2 {
+	animation-delay: 2s !important;
+}
+.animation-delay-4 {
+	animation-delay: 4s !important;
+}
+@keyframes animatedcardone {
+	0%   {transform: rotateY(15deg);}
+	100%   {transform: rotateY(-15deg);}
+}
+
+
+
+
 /*Home Page only*/
 .sample-grid {
 	display: grid;
@@ -405,9 +430,11 @@ textarea.input {
 	grid-template-columns: 1fr;
 }
 .sample-grid > img {
+	display: block;
 	max-width: 375px;
 	width: 100%;
 	height: auto;
+	margin: 1rem auto;
 }
 @media only screen and (min-width: 750px) {
 	.sample-grid {
diff --git a/index.php b/index.php
index d829a1f5..377178e3 100644
--- a/index.php
+++ b/index.php
@@ -8,7 +8,7 @@
 	<div class='layer center'></div>
 	<div class='layer readable-background center'>
 		<div class='sample-grid'>
-			<img src='/img/samples/sample1.png'>
+			<div class='animated-scene'><img src='/img/samples/sample1.png' class='animated-card-1'></div>
 			<div class='vertical-center'>
 				<h1 class='padding margin-bottom'>Choose from a Variety of Card Frames</h1>
 				<h3 class='padding margin-bottom'>Card Conjurer offers Expeditions, Inventions, Showcase Frames, and so much more. <a href='/creator/'>Take a look</a>!</h3>
@@ -21,12 +21,12 @@
 				<h1 class='padding margin-bottom'>Customize to Your Heart's Content</h1>
 				<h3 class='padding margin-bottom'>With Card Conjurer's level of customization, you'll have endless options when designing your dream cards. <a href='/creator/'>Try it out</a>!</h3>
 			</div>
-			<img src='/img/samples/sample2.png'>
+			<div class='animated-scene'><img src='/img/samples/sample2.png' class='animated-card-1 animation-delay-2'></div>
 		</div>
 	</div>
 	<div class='layer readable-background center'>
 		<div class='sample-grid'>
-			<img src='/img/samples/sample3.png'>
+			<div class='animated-scene'><img src='/img/samples/sample3.png' class='animated-card-1 animation-delay-4'></div>
 			<div class='vertical-center'>
 				<h1 class='padding margin-bottom'>Bling Out Existing Favorites</h1>
 				<h3 class='padding margin-bottom'>Easily import vital information from existing cards, then redesign them. <a href='/creator/'>Go on, do it</a>!</h3>