diff --git a/tarotcard-flip.css b/tarotcard-flip.css
index 314f3fe..d811d38 100644
--- a/tarotcard-flip.css
+++ b/tarotcard-flip.css
@@ -2,8 +2,22 @@
     --min-flip-card-height: 80vh;
 }
 
-.tarot-card--flip-on-hover {
+@keyframes flip-card {
+    to {
+        transform: rotateY(180deg);
+    }
+}
+
+.tarot-card--flip-on-hover,
+.tarot-card--flip-automatically {
     min-height: var(--min-flip-card-height);
+}
+
+.tarot-card--flip-automatically .tarot-card__content {
+    animation: flip-card 800ms 2s forwards;
+}
+
+.tarot-card--flip-on-hover {
     perspective: 1000px;
 }
 
@@ -11,7 +25,8 @@
     transform: rotateY(180deg);
 }
 
-.tarot-card--flip-on-hover .tarot-card__content {
+.tarot-card--flip-on-hover .tarot-card__content,
+.tarot-card--flip-automatically .tarot-card__content {
     transition: transform 800ms;
     transform-style: preserve-3d;
 }
diff --git a/test/index.html b/test/index.html
index a6a7a86..758ce0a 100644
--- a/test/index.html
+++ b/test/index.html
@@ -24,7 +24,7 @@
 				align-items: center;
 			}
 
-			#flip-card-back {
+			.flip-card-back-section {
 				height: 100%;
 				background: white;
 			}
@@ -90,7 +90,7 @@
 					</div>
 
 					<div class="tarot-card__side tarot-card__side--back">
-						<div id="flip-card-back" class="tarot-card__section">
+						<div class="tarot-card__section flip-card-back-section">
 							<p>This is the back side of The Flip Card.</p>
 						</div>
 					</div>
@@ -114,13 +114,36 @@
 					</div>
 
 					<div class="tarot-card__side tarot-card__side--back">
-						<div id="flip-card-back" class="tarot-card__section">
+						<div class="tarot-card__section flip-card-back-section">
 							<p>This is the back side of The Deal/Flip Card.</p>
 						</div>
 					</div>
 				</div>
 			</div>
 
+			<!-- Uses the "automatic flip" animation. -->
+			<div id="flip-card" class="tarot-card tarot-card--flip-automatically">
+				<div class="tarot-card__content">
+					<div class="tarot-card__side tarot-card__side--front">
+						<div class="tarot-card__section tarot-card__section--art">
+							<img class="tarot-card__art"
+								src="images/card_art_std.jpg"
+								alt="The Autoflip Card artwork image."
+								title="The Autoflip Card artwork image." />
+						</div>
+
+						<div class="tarot-card__section tarot-card__section--title">
+							<p class="tarot-card__title">The Autoflip Card.</p>
+						</div>
+					</div>
+
+					<div class="tarot-card__side tarot-card__side--back">
+						<div class="tarot-card__section flip-card-back-section">
+							<p>This is the back side of The Autoflip Card.</p>
+						</div>
+					</div>
+				</div>
+			</div>
 
 		</div>
 	</body>