animation-delay/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'/>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="./index.js" defer></script>
<style>
  :root {
    --delay: 0s;
  }
  .rect {
    width: 100px;
    margin: 20px auto;
    aspect-ratio: 1/1;
    background: blue;
    border-radius: 10px;
    animation: rotate-zoom forwards 1s var(--delay) paused;
    /* animation-delay: var(--delay); */
  }

  @keyframes rotate-zoom {
    0% {
      opacity: 0;
      transform: rotate(180deg) scale(2);
    }
  }
</style>
</head>
<body>
  <h1>利用延迟实现可交互动画</h1>
  <p>利用 animation-delay 为负数，让动画暂停到特定时间点，实现可交互的复杂动画</p>
  
  <input type="range" min="0" max="1" step="0.01" />
  <div class="rect"></div>
</body>
</html>