Merge pull request #3 from MuhammadShakir-dev/MuhammadShakir-dev-patch-3

MuhammadShakir-dev · web-flow · commit f84ba6082bf3 · 2023-07-08T21:03:54.000+05:00
💡Get Familiar with CSS Transition
diff --git a/CSS_Transition.html b/CSS_Transition.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Trnasition</title>
+
+    <!--Style Tag-->
+    <style>
+        body {
+            padding: 0px;
+            margin: 0px;
+        }
+
+        h1 {
+            text-align: center;
+        }
+
+        section {
+            width: 90%;
+            height: 500px;
+            box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+            border-radius: 10px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        section div {
+            width: 100px;
+            height: 100px;
+            border: none;
+            background-color: blue;
+            margin: 10px 0px;
+            border-radius: 5px;
+            transition: margin-left 2s;
+        }
+
+        section:hover div {
+            margin-left: 800    px;
+        }
+
+        div:nth-of-type(1) {
+            transition-timing-function: ease-in;
+
+        }
+
+        div:nth-of-type(2) {
+            transition-timing-function: ease-out;
+
+        }
+
+        div:nth-of-type(3) {
+            transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
+
+        }
+
+        div:nth-of-type(4) {
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
+
+        }
+    </style>
+
+</head>
+
+<body>
+    <h1>CSS Transition</h1>
+    <section>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </section>
+</body>
+
+</html>
