无JavaScript时SVG/SMIL begin事件的CSS动画等效实现问询

针对你将SVG/SMIL动画转为纯CSS动画的需求，以下是无需JavaScript即可实现常见触发场景的实用技巧：

1. 页面/SVG加载时触发动画 #

CSS动画默认会在元素加载完成后启动，可通过animation属性直接定义，若需控制启动时机，添加animation-delay即可：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="purple">
    <style>
      circle {
        /* 加载后延迟0.5s启动淡入动画 */
        animation: fadeIn 1s 0.5s forwards;
        opacity: 0;
      }
      @keyframes fadeIn {
        to { opacity: 1; }
      }
    </style>
  </circle>
</svg>

2. 点击/轻触交互触发动画 #

利用隐藏表单控件+CSS选择器实现点击触发，兼容性覆盖所有现代浏览器：

<svg width="200" height="200">
  <!-- 隐藏的状态开关 -->
  <input type="checkbox" id="clickTrigger" style="position: absolute; opacity: 0;">
  
  <!-- 可点击的触发区域 -->
  <label for="clickTrigger">
    <rect width="100" height="100" x="50" y="50" fill="#ddd" cursor="pointer"/>
  </label>
  
  <!-- 目标动画元素 -->
  <circle cx="100" cy="100" r="30" fill="orange">
    <style>
      #clickTrigger:checked ~ circle {
        animation: pulse 1.5s infinite;
      }
      @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.3); }
        100% { transform: scale(1); }
      }
    </style>
  </circle>
</svg>

也可直接用:active/:focus伪类实现单次点击触发，但:active仅在按下时生效，:focus需给元素添加tabindex="0"使其可聚焦。

3. 元素进入视口（滚动触发） #

利用现代CSS的滚动时间线特性，实现元素进入视口时自动启动动画：

<svg width="200" height="200" style="display: block; margin: 100vh 0;">
  <rect width="100" height="100" x="50" y="50" fill="teal">
    <style>
      rect {
        animation: slideUp 1.2s forwards;
        /* 绑定到页面根滚动容器 */
        animation-timeline: scroll(root);
        /* 动画触发范围：元素进入视口0%到覆盖视口50%时完成动画 */
        animation-range: entry 0% cover 50%;
        transform: translateY(50px);
        opacity: 0;
      }
      @keyframes slideUp {
        to { transform: translateY(0); opacity: 1; }
      }
    </style>
  </rect>
</svg>

兼容性：支持Chrome 115+、Firefox 117+、Safari 16.4+，旧浏览器可结合:target锚点方案（需用户点击锚链触发）。

4. 窗口调整大小触发动画 #

CSS无直接的resize伪类，但可通过媒体查询实现断点触发：

<svg width="100%" height="200">
  <polygon points="100,10 200,190 0,190" fill="gold">
    <style>
      polygon {
        transition: transform 0.8s;
      }
      /* 窗口宽度≥768px时触发旋转动画 */
      @media (min-width: 768px) {
        polygon {
          animation: rotateOnce 0.8s forwards;
        }
      }
      @keyframes rotateOnce {
        to { transform: rotate(180deg); }
      }
    </style>
  </polygon>
</svg>

注：此方法仅在窗口尺寸跨越断点时触发一次，无法实时响应每一次resize操作。

内容的提问来源于stack exchange，提问作者frumbert