tailwind1-11  Exercise 3: Animations, Reduced Motion and Enter Effects
=======================================================================

page.html:

  <div id="a1" class="size-8 bg-red-500 animate-spin"></div>
  <div id="a2" class="size-8 bg-red-500 animate-ping"></div>
  <div id="a3" class="size-8 bg-red-500 animate-pulse"></div>
  <div id="a4" class="size-8 bg-red-500 animate-bounce"></div>
  <div id="a6" class="size-8 bg-red-500 animate-[wiggle_1s_ease-in-out_infinite]"></div>

  <div id="a7" class="size-8 bg-red-500 motion-safe:animate-spin"></div>
  <div id="a8" class="size-8 bg-red-500 animate-spin motion-reduce:animate-none"></div>

  <div id="host"></div>

(1) Are they running? In the console, for each of a1..a4: getComputedStyle(el).animationName and el.getAnimations().length

  a1  spin    1s linear infinite                              1 animation running
  a2  ping    1s cubic-bezier(0, 0, 0.2, 1) infinite          1
  a3  pulse   2s cubic-bezier(0.4, 0, 0.6, 1) infinite        1
  a4  bounce  1s infinite                                     1
  a6  wiggle  1s ease-in-out infinite                         0   (no @keyframes wiggle exists on the page)

(2) Reduced motion (DevTools > Rendering > Emulate CSS media feature prefers-reduced-motion):

                                         normal    reduce
  a7  motion-safe:animate-spin           spin      none
  a8  animate-spin motion-reduce:animate-none   spin   none

(3) Enter effect. Insert from the console:

  const e = document.createElement('div');
  e.className = 'opacity-100 starting:opacity-0 transition-opacity duration-500 h-10 bg-green-500';
  document.getElementById('host').appendChild(e);
  // read getComputedStyle(e).opacity at 0ms, 150ms, 700ms

  with starting:opacity-0     0, 0.367318, 1
  same classes without it     1, 1             (it appears at once)

WHY THIS WORKS AS AN ANSWER
---------------------------
(1) The animate-* classes just point the animation shorthand at a theme variable, so the computed name, time and easing match the built-in definitions, and getAnimations() returning 1 shows the browser
is really running them. The arbitrary animate-[wiggle_...] class names an animation but cannot create one: with no @keyframes wiggle the browser has nothing to run (0), so define the keyframes,
for example in @theme beside --animate-wiggle. (2) motion-safe: only applies the class when the user has not asked for reduced motion; motion-reduce: undoes it when they have; both reach the same
result here, and motion-safe: is shorter when there is nothing else to undo. (3) A newly inserted element has no earlier style to transition from, so it just appears. starting:opacity-0 compiles to
@starting-style, which provides the first-frame value of 0, so the element fades to 1 over 500ms; the 0.367 sample is part-way through the fade.