animation finished

Author: actionanand

README.md

@@ -22,7 +22,8 @@ http://127.0.0.1:5173/
 8. [Custom Font](#custom-font)
 9. [Flex Box](#flex-box)
 10. [CSS Grid](#css-grid)
-11. [Other Resources](#resources-for-vite)
+11. [Transitions & Animations](#transitions--animations)
+12. [Other Resources](#resources-for-vite)
 
 ****
 
@@ -244,6 +245,69 @@ font: font-style font-variant font-weight font-size/line-height font-family;
 ![image](https://github.com/actionanand/css-uhost/assets/46064269/c7bd6b0d-7b48-487c-a376-a1a4ae50caa7)
 
 
+[🔼Back to the top](#contents)
+
+## Transitions & Animations
+
+* Simple animation
+
+```css
+  .modal {
+    /* animation css - `ease-in` -> starts slower & ends faster; `ease-out` -> reverse of the prior*/
+    opacity: 0;
+    transform: translateY(-3rem);
+    transition: opacity 200ms, transform .5s;
+  }
+
+  .open {
+    opacity: 1;
+    transform: translateY(0);
+  }
+```
+
+```css
+transition: WHAT DURATION DELAY TIMING-FUNCTION;
+transition: opacity 200ms 1s ease-out;
+```
+
+The above line can be translated to: "Animate any changes in the `opacity`  property (for the element to which the `transition`  property is applied) over a duration of **200ms**. Start fast and end slow, also make sure to wait **1s** before you start".
+
+1. [transition-property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property)
+2. [transition-duration](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration)
+3. [transition-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function)
+4. [transition-delay](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay)
+5. [MDN article on CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
+6. [Easing Functions Cheat Sheet](https://easings.net/)
+
+```css
+animation: NAME DURATION DELAY TIMING-FUNCTION ITERATION DIRECTION FILL-MODE PLAY-STATE;
+animation: wiggle 200ms 1s ease-out 8 alternate forwards running;
+
+@keyframes wiggle {
+  from {
+    transform: rotateZ(0);
+  }
+  to {
+    transform: rotateZ(10deg);
+  }
+}
+```
+
+The above line Can be translated to: "Play the **wiggle keyframe** set (animation) over a duration of **200ms**. Between two keyframes **start fast and end slow**, also make sure to **wait 1s before you start**. Play **8 animations** and **alternate** after each animation. Once you're done, **keep the final value** applied to the element. Oh, and you should be **playing the animation - not pausing**."
+
+1. [animation-name](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name)
+2. [animation-duration](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration)
+3. [animation-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function)
+4. [animation-delay](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay)
+5. [animation-iteration-count](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count)
+6. [animation-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)
+7. [animation-fill-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode)
+8. [animation-play-state](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state)
+9. [MDN article on CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
+
+* [List of "transitionable" Properties](https://www.w3.org/TR/css-transitions-1/#animatable-properties)
+
+
 [🔼Back to the top](#contents)
 
 ## Resources for Vite

pages/customers/customers.css

@@ -59,6 +59,10 @@ main {
   margin: .2rem;
 }
 
+.testimonial:hover .testimonial__image-container {
+  animation: flip-customer-mbl 1s ease-out forwards;
+}
+
 @media (min-width: 40rem) {
   .testimonial {
     margin: 3rem auto;
@@ -95,4 +99,33 @@ main {
     */
     width: 30%;
   }
+
+  .testimonial:hover .testimonial__image-container {
+    animation: flip-customer 1s ease-out forwards;
+  }
+}
+
+
+@keyframes flip-customer-mbl {
+  0% {
+    transform: rotateY(0);
+  }
+  50% {
+    transform: rotateY(160deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
 }
+
+@keyframes flip-customer {
+  0% {
+    transform: rotateY(0) skew(20deg);
+  }
+  50% {
+    transform: rotateY(160deg) skew(20deg);
+  }
+  100% {
+    transform: rotateY(360deg) skew(20deg);
+  }
+}

pages/customers/customers.js

@@ -53,6 +53,7 @@ document.querySelector('#footer').innerHTML = htmlStrFooter;
 const toggleBtn = document.querySelector('.toggle-button');
 const mobileNav = document.querySelector('.mobile-nav');
 const backdrop = document.querySelector('.backdrop');
+const ctaBtn = document.querySelector('.main-nav__item--cta');
 
 // & triggering mobile nav
 toggleBtn.addEventListener('click', () => {
@@ -64,3 +65,16 @@ backdrop.addEventListener('click', () => {
   mobileNav.classList.remove('open');
   backdrop.classList.remove('open');
 });
+
+// js animation
+ctaBtn.addEventListener('animationstart', (event) => {
+  console.log('Animation started : ', event);
+});
+
+ctaBtn.addEventListener('animationend', (event) => {
+  console.log('Animation ended : ', event);
+});
+
+ctaBtn.addEventListener('animationiteration', (event) => {
+  console.log('Animation iteration : ', event);
+});

pages/packages/packages.css

@@ -25,6 +25,7 @@ main {
   box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
   border-color: #ff5454;
   /* border-color: #ff5454 !important; */
+  animation: push-up 1s ease-out forwards;
 }
 
 .package a {
@@ -120,3 +121,15 @@ main {
     border-right-color: #ff5454;
   }
 }
+
+@keyframes push-up {
+  0% {
+    transform: translateY(0);
+  }
+  33% {
+    transform: translateY(-1.5rem);
+  }
+  100% {
+    transform: translateY(-1rem);
+  }
+}

shared/css/modal.css

@@ -1,6 +1,5 @@
 .modal {
   position: fixed;
-  display: none;
   z-index: 200;
   top: 20%;
   left: 10%;
@@ -9,6 +8,15 @@
   padding: 1rem;
   border: 1px solid #ccc;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+  /* 
+    display: none; 
+  */
+  /* animation css - `ease-in` -> starts slower & ends faster; `ease-out` -> reverse of the prior*/
+  opacity: 0;
+  transform: translateY(-3rem);
+  transition: opacity 200ms ease-out, transform .5s cubic-bezier(0.87, 0, 0.13, 1);
+  /* 3rd value `1s` is the delay -> transition: WHAT DURATION DELAY TIMING-FUNCTION; */
+  /* transition: opacity 200ms ease-out 1s, transform .5s ease-out 1s; */
 }
 
 .modal__title {
@@ -47,9 +55,6 @@
   border-color: #ff5454;
 }
 
-.open {
-  display: block;
-}
 
 @media (min-width: 35rem) {
   .modal {

shared/css/shared.css

@@ -34,8 +34,8 @@ main {
 }
 
 .backdrop {
-  position: fixed;
   display: none;
+  position: fixed;
   z-index: 100;
   width: 100vw;
   height: 100vh;
@@ -138,6 +138,11 @@ height: 100%;
   border-radius: 8px;
 }
 
+.main-nav__item--cta {
+  animation: wiggle 400ms 3s 8;
+  /* animation-play-state: running; */
+}
+
 .main-nav__item--cta a:hover,
 .main-nav__item--cta a:active,
 .mobile-nav__item--cta a:hover,
@@ -148,14 +153,17 @@ height: 100%;
 }
 
 .mobile-nav {
-  display: none;
   position: fixed;
   z-index: 101;
   top: 0;
   left: 0;
   background: white;
   width: 80%;
   height: 100vh;
+  /* display: none; */
+  /* Animation */
+  transform: translateX(-100%);
+  transition: transform 300ms ease-out;
 }
 
 .mobile-nav__items {
@@ -232,7 +240,10 @@ height: 100%;
 }
 
 .open {
-  display: block;
+  /* animation */
+  display: block; 
+  opacity: 1;
+  transform: translateY(0);
 }
 
 @media (min-width: 40rem) {
@@ -260,3 +271,15 @@ height: 100%;
     margin: 0 1rem;
   }
 }
+
+@keyframes wiggle {
+  0% {
+    transform: rotateZ(0);
+  }
+  50% {
+    transform: rotateZ(-10deg); 
+  }
+  100% {
+    transform: rotateZ(10deg);
+  }
+}