.button {
  background: #6c8cff;
  transition: background 0.3s ease;
}
.button:hover {
  background: #4a6cf7;  /* smoothly transitions to this */
}

/* Single property */
transition-property: background-color;

/* Multiple properties */
transition-property: background-color, transform, opacity;

/* All transitionable properties */
transition-property: all;

/* None (disable transitions) */
transition-property: none;

transition-duration: 0.3s;    /* 300 milliseconds */
transition-duration: 300ms;   /* same thing */
transition-duration: 1s;      /* one second */

/* Different durations per property */
transition-property: background, transform;
transition-duration: 0.3s, 0.6s;

/* 5 discrete steps */
transition-timing-function: steps(5, jump-end);

/* Common sprite animation */
.sprite {
  width: 64px;
  background: url('sheet.png');
  animation: walk 0.6s steps(8) infinite;
}

transition-delay: 0.2s;    /* wait 200ms then start */
transition-delay: -0.3s;   /* start 300ms into the transition */

/* Staggered transitions on multiple properties */
transition-property: opacity, transform;
transition-duration: 0.4s, 0.4s;
transition-delay: 0s, 0.15s;  /* transform starts later */

/* transition: property duration timing-function delay */
transition: background-color 0.3s ease 0s;

/* Multiple transitions */
transition: background 0.3s ease,
            transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.3s ease 0.1s;

/* Shortcut for all properties */
transition: all 0.3s ease;

/* Simple from/to */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Percentage keyframes */
@keyframes bounce {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-30px); }
  60%  { transform: translateY(-15px); }
  80%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* Multiple properties */
@keyframes slideInFade {
  0%   { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}

.element {
  animation-name: bounce;             /* name of @keyframes */
  animation-duration: 0.8s;           /* how long */
  animation-timing-function: ease;    /* acceleration curve */
  animation-delay: 0.2s;              /* wait before starting */
  animation-iteration-count: 3;       /* how many times */
  animation-direction: alternate;     /* forward then backward */
  animation-fill-mode: forwards;      /* keep end state */
  animation-play-state: running;      /* running or paused */
}

animation-iteration-count: 1;          /* play once (default) */
animation-iteration-count: 3;          /* play 3 times */
animation-iteration-count: infinite;   /* loop forever */
animation-iteration-count: 2.5;        /* play 2.5 times, stop mid-animation */

.spinner {
  animation: spin 2s linear infinite;
}
.spinner:hover {
  animation-play-state: paused;
}

/* animation: name duration timing delay count direction fill-mode play-state */
animation: bounce 0.8s ease-in-out 0.2s infinite alternate forwards running;

/* In practice, most values are optional */
animation: fadeIn 0.5s ease;
animation: spin 1s linear infinite;
animation: slideUp 0.4s ease forwards;

/* Multiple animations on one element */
animation: fadeIn 0.5s ease,
            slideUp 0.6s ease 0.1s;

/* Hint the browser to prepare for animation */
.animated-element {
  will-change: transform, opacity;
}

/* Apply on hover intent, remove when done */
.card {
  transition: transform 0.3s ease;
}
.card:hover {
  will-change: transform;
  transform: translateY(-4px);
}

/* Approach 1: Remove animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Approach 2: Only add animations for users who are OK with motion */
.element {
  opacity: 1;  /* default: no animation */
}

@media (prefers-reduced-motion: no-preference) {
  .element {
    animation: fadeIn 0.5s ease;
  }
}

/* WRONG — transition only applies during hover */
.btn:hover {
  background: red;
  transition: background 0.3s;
}

/* RIGHT — transition applies in both directions */
.btn {
  transition: background 0.3s;
}
.btn:hover {
  background: red;
}