Transform, Transition and Animation - animation-fill-mode

pktcodes · pktcodes · commit cec2337e9c56 · 2022-11-10T17:20:45.000-06:00
diff --git a/index.html b/index.html
@@ -11,7 +11,6 @@
   </head>
 
   <body>
-    <div class="transition">transition</div>
     <div class="animation">animation</div>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,50 +1,38 @@
 /* 
-Transtion 0 = 100%
-from start state to end state
-ANIMATION 0 1% 2% .... 100%
- multiple states
+animation-fill-mode:what values are applied by the animation outside the time it is executing. 
 */
 
 div {
   width: 200px;
   height: 200px;
   color: white;
   margin: 20px;
-}
-
-.transition {
-  background: red;
-  transition: all 2s linear;
-}
-
-.transition:hover {
-  background: blue;
-  transform: translateX(200px);
+  opacity: 0;
 }
 
 .animation {
   background: blue;
-  /* animation-name: move;
-  animation-duration: 10s;
-  animation-iteration-count: 3; */
-  animation: move 3s infinite;
+  animation: move 3s 3;
+  animation-fill-mode: forwards;
 }
 
 @keyframes move {
   0% {
-    background: red;
+    opacity: 0.1;
+  }
+  25% {
+    opacity: 0.25;
     transform: translateX(50px);
   }
   50% {
-    background: green;
+    opacity: 0.5;
     transform: translateX(200px);
   }
   75% {
-    background: fuchsia;
-    transform: translateX(-200px);
+    opacity: 0.75;
   }
   100% {
-    background: aqua;
+    opacity: 1;
     transform: translateX(50px);
   }
 }
