CSS Animations & Keyframes

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}
/* No hover, no class toggle, no trigger of any kind — this runs
   continuously the instant the element exists in the DOM */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1;   }
  50%  { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1);   opacity: 1;   }
}

.element {
  animation-name: pulse;                 /* which @keyframes block to use */
  animation-duration: 2s;                /* one full cycle's length */
  animation-timing-function: ease-in-out; /* the pacing curve within one cycle */
  animation-iteration-count: infinite;    /* or a specific number like 3 */
  animation-direction: alternate;         /* normal / reverse / alternate / alternate-reverse */
  animation-delay: 0.5s;                  /* wait before starting */
  animation-fill-mode: forwards;          /* what state to hold before/after running */
}

/* The shorthand — same six values, one line */
.element {
  animation: pulse 2s ease-in-out infinite alternate 0.5s forwards;
}

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.card {
  animation: slide-in 0.5s ease-out;
  /* After 0.5s, the element reverts to whatever transform it had
     BEFORE the animation — often back to no transform at all,
     undoing the slide-in visually the instant it "finishes" */
}

.card {
  animation: slide-in 0.5s ease-out forwards;
  /* The element stays at transform: translateX(0) permanently
     after the animation completes, exactly as intended */
}

.button {
  transition: background-color 0.2s;
}
.button:hover {
  background-color: #4285f4;
}

@keyframes attention-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}
.error-field {
  animation: attention-shake 0.4s ease-in-out;
}

@keyframes slide-loop {
  from { left: 0; }
  to   { left: 100px; }
}
/* Every single frame recalculates layout for this element AND
   potentially its siblings — running "infinite" makes this cost ongoing */

@keyframes slide-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(100px); }
}
/* GPU-composited, no layout recalculation on any frame */

A "payment successful" toast notification is built with a slide-in-and-fade-in animation. QA reports that the toast appears to flash on screen instantly for a single frame, then vanish, before its animation has even visually started.

@keyframes toast-in {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.toast {
  animation: toast-in 0.3s ease-out;
}

What was actually happening

Without animation-fill-mode: forwards, the browser reverted the toast's transform and opacity back to their pre-animation CSS values the instant the 0.3-second animation completed — and since the element's base (non-animated) styles had opacity: 1 and no transform at all, the toast briefly animated in, then immediately snapped to a DIFFERENT, also-fully-visible state, reading as a confusing flicker rather than a clean, held final position. Adding forwards to the animation shorthand fixed it entirely — the engineer's own note afterward: "the animation was working correctly the whole time. It just had nowhere to land."