Merge pull request #42 from chiragjaiswal20082002/master

Create Pulsing effect using CSS3 Transform Scale #6
Am10aN16 · Oct 23, 2023 · 706e495 · 706e495
2 parents e24d7f0 + 7d44687
commit 706e495
Showing 1 changed file with 57 additions and 0 deletions.
diff --git a/Pulsing effect using CSS3 Transform Scale #6 b/Pulsing effect using CSS3 Transform Scale #6
@@ -0,0 +1,57 @@
+<!DOCTYPE html> 
+<html> 
+
+<head> 
+	<title> 
+		CSS | Pulse animation 
+	</title> 
+
+	<style> 
+		.element { 
+			height: 250px; 
+			width: 250px; 
+			margin: 0 auto; 
+			background-color: lime; 
+			animation-name: stretch; 
+			animation-duration: 2.0s; 
+			animation-timing-function: ease-out; 
+			animation-direction: alternate; 
+			animation-iteration-count: infinite; 
+			animation-play-state: running; 
+		} 
+
+		@keyframes stretch { 
+			0% { 
+				transform: scale(.5); 
+				background-color: green; 
+				border-radius: 100%; 
+			} 
+
+			50% { 
+				background-color: orange; 
+			} 
+
+			100% { 
+				transform: scale(2.0); 
+				background-color: red; 
+			} 
+		} 
+
+		body, 
+		html { 
+			height: 100%; 
+		} 
+
+		body { 
+			display: flex; 
+			align-items: center; 
+			justify-content: center; 
+		} 
+	</style> 
+</head> 
+
+<body> 
+	<div class="element"></div> 
+</body> 
+
+</html>