CSS 전환, 한 번에 하나의 속성

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS transition playground</title>
<style>
  body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .track { position: relative; height: 56px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #dde1e7; }
  .ball {
    position: absolute; top: 8px; left: 8px;
    width: 40px; height: 40px; border-radius: 50%; background: #2563eb;
    /* the whole lesson in one line: property, duration, timing function, delay */
    transition: left 600ms ease 0ms;
  }
  .ball.on { left: calc(100% - 48px); }
  .controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 14px; margin: 14px 0 12px; font-size: 13px; }
  label { display: grid; gap: 4px; }
  select, input { font: inherit; }
  button { font: inherit; font-weight: 600; padding: 8px 16px; border: 0; border-radius: 8px; background: #1d2330; color: #fff; cursor: pointer; }
  code { display: block; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #fff; font: 13px ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
  #log { margin: 8px 0 0; font-size: 13px; color: #0f5132; min-height: 1.4em; }
</style>
</head>
<body>
<div class="track"><div class="ball" id="ball"></div></div>

<div class="controls">
  <label>Duration: <span id="durOut">600ms</span>
    <input id="dur" type="range" min="100" max="2000" step="100" value="600"></label>
  <label>Delay: <span id="delOut">0ms</span>
    <input id="del" type="range" min="0" max="1000" step="100" value="0"></label>
  <label>Timing function
    <select id="ease">
      <option>ease</option><option>linear</option><option>ease-in</option>
      <option>ease-out</option><option>ease-in-out</option>
      <option>cubic-bezier(.34, 1.56, .64, 1)</option>
      <option>steps(5)</option>
    </select></label>
</div>

<button id="go">Move</button>
<code id="css"></code>
<p id="log"></p>

<script>
  const ball = document.getElementById('ball');
  const dur = document.getElementById('dur'), del = document.getElementById('del'), ease = document.getElementById('ease');
  const log = document.getElementById('log');

  function update() {
    const t = `left ${dur.value}ms ${ease.value} ${del.value}ms`;
    ball.style.transition = t;  // same as writing it in the stylesheet
    document.getElementById('css').textContent = `transition: ${t};`;
    document.getElementById('durOut').textContent = dur.value + 'ms';
    document.getElementById('delOut').textContent = del.value + 'ms';
  }
  [dur, del, ease].forEach((el) => el.addEventListener('input', update));
  update();

  let started = 0;
  document.getElementById('go').addEventListener('click', () => {
    started = performance.now();
    log.textContent = 'Moving...';
    ball.classList.toggle('on');  // change the value; the transition animates it
  });

  // fires once per property when the transition finishes
  ball.addEventListener('transitionend', (e) => {
    const ms = Math.round(performance.now() - started);
    log.textContent = `transitionend: ${e.propertyName}, ${e.elapsedTime}s of motion, ${ms}ms after the click`;
  });
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Timing functions side by side</title>
<style>
  body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .lane { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 8px; margin-bottom: 6px; }
  .lane span { font: 12px ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
  .track { position: relative; height: 34px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #dde1e7; }
  .dot {
    position: absolute; top: 5px; left: 5px; width: 24px; height: 24px; border-radius: 50%; background: #2563eb;
    transition: left 1.6s;  /* same duration for all; only the timing function differs */
  }
  .run .dot { left: calc(100% - 29px); }
  button { font: inherit; font-weight: 600; padding: 8px 16px; border: 0; border-radius: 8px; background: #1d2330; color: #fff; cursor: pointer; margin-top: 6px; }
</style>
</head>
<body>
<div id="race">
  <div class="lane"><span>linear</span><div class="track"><i class="dot" style="transition-timing-function: linear"></i></div></div>
  <div class="lane"><span>ease</span><div class="track"><i class="dot" style="transition-timing-function: ease"></i></div></div>
  <div class="lane"><span>ease-in</span><div class="track"><i class="dot" style="transition-timing-function: ease-in"></i></div></div>
  <div class="lane"><span>ease-out</span><div class="track"><i class="dot" style="transition-timing-function: ease-out"></i></div></div>
  <div class="lane"><span>ease-in-out</span><div class="track"><i class="dot" style="transition-timing-function: ease-in-out"></i></div></div>
  <div class="lane"><span>cubic-bezier(.34, 1.56, .64, 1)</span><div class="track"><i class="dot" style="transition-timing-function: cubic-bezier(.34, 1.56, .64, 1)"></i></div></div>
  <div class="lane"><span>steps(5)</span><div class="track"><i class="dot" style="transition-timing-function: steps(5)"></i></div></div>
</div>
<button id="go">Run</button>

<script>
  // every dot starts and ends together; watch how each one spends the 1.6 seconds
  document.getElementById('go').addEventListener('click', () => {
    document.getElementById('race').classList.toggle('run');
  });
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fade in and out from display: none</title>
<style>
  body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: 13px; }
  button { font: inherit; font-weight: 600; padding: 8px 16px; border: 0; border-radius: 8px; background: #1d2330; color: #fff; cursor: pointer; }

  .panel {
    display: none; opacity: 0; transform: translateY(-10px);
    margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12); font-size: 14px; line-height: 1.5;
    /* display joins the list with allow-discrete, so it waits for the fade */
    transition: opacity .35s, transform .35s, display .35s allow-discrete;
  }
  .panel.open { display: block; opacity: 1; transform: none; }
  /* where the fade-in starts, since display: none had no style to start from */
  @starting-style {
    body:not(.plain) .panel.open { opacity: 0; transform: translateY(-10px); }
  }

  /* the "without" version: same panel, no allow-discrete, no @starting-style */
  .plain .panel { transition: opacity .35s, transform .35s; }

  #log { margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: #1d2330; color: #d1fae5;
         font: 12px/1.5 ui-monospace, Consolas, monospace; height: 96px; overflow: auto; }
</style>
</head>
<body>
<div class="bar">
  <button id="toggle" aria-expanded="false" aria-controls="panel">Show details</button>
  <label><input type="checkbox" id="plain"> Turn off allow-discrete and @starting-style</label>
</div>

<div class="panel" id="panel">
  <b>Order #1042</b><br>
  Two items, shipped Tuesday. While closed, this panel is display: none, so it takes no space and cannot be tabbed into.
</div>

<pre id="log"></pre>

<script>
  const panel = document.getElementById('panel');
  const btn = document.getElementById('toggle');
  const log = document.getElementById('log');
  const say = (s) => { log.textContent += s + '\n'; log.scrollTop = log.scrollHeight; };

  btn.addEventListener('click', () => {
    const open = panel.classList.toggle('open');
    btn.textContent = open ? 'Hide details' : 'Show details';
    btn.setAttribute('aria-expanded', open);
  });

  document.getElementById('plain').addEventListener('change', (e) => {
    document.body.classList.toggle('plain', e.target.checked);
    log.textContent = '';
  });

  // one event per property that transitioned
  panel.addEventListener('transitionrun', (e) => say(`run  ${e.propertyName}`));
  panel.addEventListener('transitionend', (e) => {
    say(`end  ${e.propertyName} (${e.elapsedTime}s)`);
    if (e.propertyName === 'opacity' && !panel.classList.contains('open')) say('-> fully closed');
  });
</script>
</body>
</html>