🎨 CSS Lesson 08 — Transitions & Animations

1. transition

transition: property duration timing-function delay;
transition: background 0.4s ease;
transition: all 0.3s ease;          /* all properties */
transition: transform 0.5s, opacity 0.3s;  /* multiple */

2. Timing Functions

ease           /* slow-fast-slow (default) */
linear         /* constant speed */
ease-in        /* slow start */
ease-out       /* slow end */
ease-in-out    /* slow start + end */
cubic-bezier() /* custom curve */

3. transform

transform: translate(x, y);     /* move */
transform: translateX(20px);
transform: rotate(45deg);        /* rotate */
transform: scale(1.5);           /* resize */
transform: scaleX(2);
transform: skew(10deg, 5deg);    /* skew */
/* combine: */
transform: translate(10px, -10px) rotate(15deg) scale(1.1);

4. @keyframes & animation

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-30px); }
}

.element {
  animation: bounce 1s ease-in-out infinite;
  /*         name   dur  timing        count */
  animation-delay: 0.5s;
  animation-direction: alternate;  /* forward/reverse alternate */
  animation-fill-mode: forwards;   /* keep end state */
  animation-play-state: paused;    /* pause! */
}

5. Loading Animations

/* Dot loader */
@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40%           { transform: scale(1); }
}
.dot:nth-child(2) { animation-delay: 0.16s; }
.dot:nth-child(3) { animation-delay: 0.32s; }

/* Spinner */
@keyframes spinner { to { transform: rotate(360deg); } }
.spinner { border: 4px solid #ddd; border-top-color: green;
  border-radius: 50%; animation: spinner 0.8s linear infinite; }

6. Hover Effects (Real Use)

7. Typing Effect (CSS only)

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes blink { 50% { border-color: transparent; } }

.text {
  white-space: nowrap; overflow: hidden;
  border-right: 3px solid #42b883;
  animation: typing 2.5s steps(30) forwards,
             blink 0.75s step-end infinite;
}

8. Pause / Resume Animation

animation-play-state: running;  /* default */
animation-play-state: paused;

/* JS toggle: */
el.style.animationPlayState = 'paused'