CSS中的链/序列动画[重复]

Posted 2023-03-06

【中文标题】CSS中的链/序列动画[重复]

【英文标题】：Chain/sequence animation in CSS [duplicate]

【发布时间】：2018-06-15 14:21:06

【问题描述】：

我希望我的按钮按时间顺序排列 - 第二个按钮在第一个按钮结束后开始动画，依此类推...... 有人可以帮我实现这个效果吗？

a 
      padding: 6px;
    display: block;
    width: 50px;
    font-size: 17px;
    margin: 10px auto;
    border: 2px solid;
    text-decoration: none;
    box-shadow: 0 0 0 rgba(204,169,44, 0.4);
    animation: pulse 2s infinite;

@keyframes pulse 
  0% 
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  
  70% 
      -moz-box-shadow: 0 0 0 10px rgba(255,208,0, 0.2);
      box-shadow: 00 0 0 10px rgba(255,208,0, 0.2);
  
  100% 
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  

<a class="btn-100" href="#">100</a>
<a class="btn-500" href="#">500</a>
<a class="btn-1250" href="#">1250</a>

【问题讨论】：

您可以使用 animation-delay 属性，但要以编程方式按顺序使用它，您应该只使用 javascript。

但我希望动画是无限的——在最后一个元素动画结束后，第一个开始。

【参考方案1】：

只需添加一些animation delay：

.btn-500 
    animation-delay: 0.6s;


.btn-1250 
    animation-delay: 1.3s;

演示：

a 
  padding: 6px;
  display: block;
  width: 50px;
  font-size: 17px;
  margin: 10px auto;
  border: 2px solid;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
  animation: pulse 2s infinite;


.btn-500 
  animation-delay: 0.6s;


.btn-1250 
  animation-delay: 1.3s;


@keyframes pulse 
  0% 
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
  
  70% 
    -moz-box-shadow: 0 0 0 10px rgba(255, 208, 0, 0.2);
    box-shadow: 00 0 0 10px rgba(255, 208, 0, 0.2);
  
  100% 
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  

<a class="btn-100" href="#">100</a>
<a class="btn-500" href="#">500</a>
<a class="btn-1250" href="#">1250</a>

View on jsFiddle

【参考方案2】：

正如其他人所建议的，使用animation-delay 来偏移每个元素的动画。

为了循环整个组，将动画持续时间乘以元素数量并相应地更改关键帧。下面，我将动画持续时间乘以三，然后将关键帧百分比除以三。

如果您有大量元素或者它们是动态添加的，您可能需要考虑使用 JavaScript，如 here 所述。

a 
  padding: 6px;
  display: block;
  width: 50px;
  font-size: 17px;
  margin: 10px auto;
  border: 2px solid;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
  animation: pulse 6s infinite;


.btn-100 
  animation-delay: 0s;

.btn-500 
  animation-delay: 2s;

.btn-1250 
  animation-delay: 4s;


@keyframes pulse 
  0% 
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
  
  23.333% 
    -moz-box-shadow: 0 0 0 10px rgba(255, 208, 0, 0.2);
    box-shadow: 00 0 0 10px rgba(255, 208, 0, 0.2);
  
  33.333% 
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  

<a class="btn-100" href="#">100</a>
<a class="btn-500" href="#">500</a>
<a class="btn-1250" href="#">1250</a>