Transform, Transition and Animation - Transition-timing-function

pktcodes · pktcodes · commit 13ffe8d06c75 · 2022-11-10T00:01:20.000-06:00
diff --git a/index.html b/index.html
@@ -11,8 +11,11 @@
   </head>
 
   <body>
-    <div class="one"></div>
-    <div class="two"></div>
-    <div class="three"></div>
+    <div class="default">default</div>
+    <div class="ease">ease</div>
+    <div class="linear">linear</div>
+    <div class="ease-in">ease-in</div>
+    <div class="ease-out">ease-out</div>
+    <div class="ease-in-out">ease-in-out</div>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,41 +1,46 @@
 /* 
-transition: change over time
-transition-delay:
-shorthand
+how the transition takes place
+transition-timing-function
+transition:all 3s here 5s;
+ease = default
+ease = slow start, fast, slow end
+linear = same speed start to end
+ease-in = slow start
+ease-out = slow end
+ease-in-out = slow start,fast, slow end
 */
 
 div {
-  width: 150px;
-  height: 150px;
-  display: inline-block;
+  background: blue;
+  color: white;
+  margin: 10px;
+  width: 100px;
+  height: 100px;
+  font-size: 20px;
+  text-align: center;
+  transition: all 2s;
 }
 
-.one {
-  background: red;
+div:hover {
+  transform: translateX(200px);
 }
 
-.two {
-  background: blue;
-  /* transition-property: background, border-radius;
-  transition-duration: 4s, 2s; */
-
-  /* transition delay */
-  /* transition-delay: 2s; */
+.ease {
+  transition-timing-function: ease;
+}
 
-  /* Transition shorthand for specific*/
-  /* transition: background 4s 2s, border-radius 2s 1s; */
+.linear {
+  transition-timing-function: linear;
+}
 
-  /* Transition shorthand for all */
-  transition: all 2s 1s;
+.ease-in {
+  transition-timing-function: ease-in;
 }
 
-.two:hover {
-  background: chartreuse;
-  border-radius: 50%;
-  transform: scale(2, 2);
-  margin-top: 50%;
+.ease-out {
+  transition-timing-function: ease-out;
 }
 
-.three {
-  background: green;
+.ease-in-out {
+  transition-timing-function: ease-in-out;
 }
