Transform, Transition and Animation - Animation

pktcodes · pktcodes · commit e82ad1d26aa1 · 2022-11-10T16:57:09.000-06:00
diff --git a/index.html b/index.html
@@ -11,11 +11,7 @@
   </head>
 
   <body>
-    <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>
+    <div class="transition">transition</div>
+    <div class="animation">animation</div>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,46 +1,50 @@
 /* 
-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
+Transtion 0 = 100%
+from start state to end state
+ANIMATION 0 1% 2% .... 100%
+ multiple states
 */
 
 div {
-  background: blue;
+  width: 200px;
+  height: 200px;
   color: white;
-  margin: 10px;
-  width: 100px;
-  height: 100px;
-  font-size: 20px;
-  text-align: center;
-  transition: all 2s;
+  margin: 20px;
 }
 
-div:hover {
-  transform: translateX(200px);
+.transition {
+  background: red;
+  transition: all 2s linear;
 }
 
-.ease {
-  transition-timing-function: ease;
-}
-
-.linear {
-  transition-timing-function: linear;
-}
-
-.ease-in {
-  transition-timing-function: ease-in;
+.transition:hover {
+  background: blue;
+  transform: translateX(200px);
 }
 
-.ease-out {
-  transition-timing-function: ease-out;
+.animation {
+  background: blue;
+  /* animation-name: move;
+  animation-duration: 10s;
+  animation-iteration-count: 3; */
+  animation: move 3s infinite;
 }
 
-.ease-in-out {
-  transition-timing-function: ease-in-out;
+@keyframes move {
+  0% {
+    background: red;
+    transform: translateX(50px);
+  }
+  50% {
+    background: green;
+    transform: translateX(200px);
+  }
+  75% {
+    background: fuchsia;
+    transform: translateX(-200px);
+  }
+  100% {
+    background: aqua;
+    transform: translateX(50px);
+  }
 }
