css - Sass 顺序动画

Question

https://codepen.io/sinrise/pen/qxPmOR

如何让这种情况永远重复，第一次出现视锥细胞，第二次消失，依此类推？它有点像一次通过然后什么都没有。他们也需要额外的通行证才能消失。不确定我做错了什么。

HTML

<svg data-rot="0" data-pass="1" id="truck_cones" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;">
<circle id="base" cx="64" cy="64" r="39"/>
<polygon class="cone" id="cone_30" points="64,20 61,25.2 67,25.2 "/>
<polygon class="cone" id="cone_60" points="85.4,25.5 80.2,28.6 85.5,31.5 "/>
<polygon class="cone" id="cone_90" points="102.1,41.9 96.1,42 99.1,47.2 "/>
<polygon class="cone" id="cone_120" points="108,64 102.8,61 102.8,67 "/>
<polygon class="cone" id="cone_150" points="101.9,86.4 98.9,81.2 95.9,86.4 "/>
<polygon class="cone" id="cone_180" points="86.2,102 86.2,96 81,99 "/>
<polygon class="cone" id="cone_210" points="65,108 67.9,102.7 61.9,102.9 "/>
<polygon class="cone" id="cone_240" points="41.6,101.9 46.9,98.9 41.7,95.9 "/>
<polygon class="cone" id="cone_270" points="26,86.2 32,86.2 29,81 "/>
<polygon class="cone" id="cone_300" points="20,64 25.2,67 25.2,61 "/>
<polygon class="cone" id="cone_330" points="25.5,42.6 28.6,47.8 31.5,42.5 "/>
<polygon class="cone" id="cone_360" points="41.9,25.9 42,31.9 47.2,28.9 "/>
<rect id="truck" x="57" y="17" width="14" height="8"/>
</svg>

SASS

#truck_cones { width: 128px; }
.cone { fill: white; }
#base { fill: gray; }
#truck { fill: blue; transform-origin: 64px 64px; }

@keyframes truck_rotate {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(359deg); }
  100% { transform: rotate(719deg); }
}

#truck {
  animation: 5s linear infinite truck_rotate;
}

@keyframes cone_on {
  0% { fill: white; }
  100% { fill: orange; }
}
@keyframes cone_off {
  0% { fill: orange; }
  100% { fill: white; }
}

$cone: 30;
$delay_on: 0s;
$delay_off: 5s;
@for $i from 1 through 13 {
  #cone_#{$cone} {
    animation: .1s $delay_on linear 1 forwards cone_on, .1s $delay_off linear 1 forwards cone_off;
  }
  $cone: $cone + 30;
  $delay_on: $delay_on + 0.2083s;
  $delay_off: $delay_off + 0.2083s;
}

Answer 1

尝试延长圆锥体动画的持续时间以匹配卡车旋转的持续时间。请参阅以下代码和代码笔示例:

#truck_cones { width: 128px; }
.cone { fill: transparent; }
#base { fill: gray; }
#truck { fill: blue; transform-origin: 64px 64px; }

$duration: 2.5s;
$cone_dudation: ($duration * 2);
$steps: 12;
$step_increment: ($cone_dudation / $steps) / 2;

@keyframes truck_rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#truck {
    animation: $duration linear infinite truck_rotate;
}

@keyframes cone_on {
    0% { fill: orange; }
    49.99% { fill: orange; }
    50% { fill: transparent; }
    100% { fill: transparent; }
}
@keyframes cone_off {
    0% { fill: transparent; }
    49.99% { fill: transparent; }
    50% { fill: orange; }
    100% { fill: orange; }
}

$cone: 30;
$delay_on: 0s;
$delay_off: $duration;
@for $i from 1 through $steps {
    #cone_#{$cone} {
        animation: $cone_dudation $delay_on linear infinite cone_on, $cone_dudation $delay_off linear infinite cone_off;
    }
    $cone: $cone + 30;
    $delay_on: $delay_on + $step_increment;
    $delay_off: $delay_off + $step_increment;
}

工作示例: https://codepen.io/anon/pen/EQwvMj