Question

我正在尝试使用CSS3关键帧为SVG对象设置动画。 SVG包含13条路径。首先，我希望每个路径都以0.1s的延迟出现，然后再保持可见（使用笔触）。当所有13条路径都出现后，我希望使用另一个关键帧同时填充所有这些路径，但是由于我已经在使用using System.Collections; using System.Collections.Generic; using UnityEngine; public class PlayerPlatformerController : PhysicsObject { public float jumpTakeOffSpeed = 7; public float maxSpeed = 7; // Start is called before the first frame update void Start() { } protected override void ComputeVelocity() { Vector2 move = Vector2.zero; move.x = Input.GetAxis("Horizontal"); if (Input.GetButtonDown("Jump") && grounded) { velocity.y = jumpTakeOffSpeed; } else if (Input.GetButtonUp("Jump")) { if (velocity.y > 0) { velocity.y = velocity.y * 0.5f; } } targetVelocity = move * maxSpeed; } }来显示路径，因此我不确定如何用其他关键帧一次填充所有路径

我现在有下面的CSS代码。有另一种方法可以实现我想要的吗？

animation-delay

Answer 1

一种实现方法是将<g>元素中的路径分组，然后将填充动画应用于该组：

g{fill:none;animation: fill 1s 1 .7s forwards; }

接下来是只有7条路径的工作示例。您可以对13条路径使用相同的逻辑。

path {
    stroke: #ccc;
    stroke-width: 5px;
    animation: appear .3s 1;
    animation-fill-mode: forwards;
}

path:nth-child(1), 
path:nth-child(2) { animation-delay: .1s }      
path:nth-child(3) { animation-delay: .2s }      
path:nth-child(4) { animation-delay: .3s }      
path:nth-child(5) { animation-delay: .4s }      
path:nth-child(6) { animation-delay: .5s }      
path:nth-child(7) { animation-delay: .6s }  

g{fill:none;animation: fill 1s 1 .7s forwards; }
  

@keyframes appear { 
    from { opacity:0; } 
    to { opacity:1; } 
}

@keyframes fill {
    from { fill: none; }
    to { fill: #f00; }
}

<svg viewBox="0 0 120 30">
  <g>
  <path d="M10,11h8v8h-8z"/>
  <path d="M25,11h8v8h-8z"/>
  <path d="M40,11h8v8h-8z"/>
  <path d="M55,11h8v8h-8z"/>
  <path d="M70,11h8v8h-8z"/>
  <path d="M85,11h8v8h-8z"/>
  <path d="M100,11h8v8h-8z"/>
  </g>
</svg>

多个CSS关键帧动画，SVG路径上有延迟

1 个答案: