Anwendung von CSS3-Animationseffekten in Aktivitätsseiten

[
    {
        Zustand: 0,
        links: 9,
        oben: -2,
        Richtung: { rotateZ: 290, Farbe: "#d26754" }
    },
    {
        Zustand: 0,
        links: 66,
        oben: 10,
        Richtung: { rotateZ: 24, Farbe: "#f58351" }
    },
    {
        Zustand: 0,
        links: 18,
        oben: 20,
        Richtung: { rotateZ: 30, Farbe: "#f78351" }
    },
    {
        Zustand: 0,
        links: -2,
        oben: 36,5,
        Richtung: { rotateZ: 295, Farbe: "#e19d47" }
    },
    {
        Zustand: 0,
        links: 52,
        oben: 49,5,
        Richtung: { rotateZ: 293, Farbe: "#e19d47" }
    }
]

<div Klasse="Artikel" flex="Haupt:Mitte Kreuz:Mitte"
:Stil="{links:item.left+'%',top:item.top+'%'}"
v-for="Artikel in Artikeln" @click="showReceive(Artikel)">
    <div Klasse="unten" flex="main:center cross:center">
        <div class="direction" flex="dir:top" :style="{transform:`rotateX(34deg) rotateY(0deg) rotateZ(${item.direction.rotateZ}deg)`}">
            <div Klasse="halb"></div>
            <div Klasse="Halbkettenfahrzeug">
                <div Klasse="Pfeil"
                :style="{transform: `drehen(${item.direction.rotate}deg`,
                rechts: `${item.direction.right}px`,
                'Rahmenfarbe': `${item.direction.color} transparent transparent`
                }"></div>
            </div>
        </div>
    </div>
</div>
  .Richtung {
    Position: absolut;
    Breite: 20px;
    Höhe: 260%;
    .halb {
      biegen: 1;
    }
    .Schiene {
      Position: relativ;
      //Rand oben: 90px;
      Rand oben: 2em;
      .Pfeil {
        Position: absolut;
        Breite: 0;
        Höhe: 0;
        Rand: 10px durchgezogen;
        Rahmenfarbe: rot transparent transparent;
        Animation: dynamicArrow 3000 ms unendlich linear;
      }
    }
  }
/* //Dynamischer Pfeil*/
@keyframes dynamischer Pfeil {
  0% {
    Deckkraft: 1;
    unten: 100 %;
  }
  70 % {
    Deckkraft: 1;
  }
  90 % {
    Deckkraft: 0,1;
    unten: -20px;
  }
  100 % {
    Deckkraft: 0;
  }
}

<div Klasse="Schnee">
  <div class="s_track" :style="{transform:`rotate(45deg) translate(${snow.deviation}px,${-snow.deviation}px)`,'z-index':snow.zindex}" v-for="Schnee in Schnee">
      <img class="snow" src="/static/original/img/DoubleDenierActivies/cbp_snow.png" :style="{opacity:snow.opacity,animation: `dynamicSnow ${snow.speed}ms ${snow.delay}ms unendlich linear`,width:snow.size*1.14+'px',height:snow.size+'px'}"/>
  </div>
</div>
.s_track {
  Position: absolut;
  Breite: 220%;
  // Höhe: 10px;
  oben: -10px;
  Transform-Ursprung: 0 0 0;
  .Schnee {
    Sichtbarkeit: versteckt;
    Position: absolut;
    Z-Index: 2;
    Animation: dynamischer Schnee, 2000 ms, unendlich linear;
  }
}
/* //Schneeflocke*/
@keyframes dynamicSnow {
  0% {
    Sichtbarkeit: sichtbar;
    oben: 0;
    links: 0;
    transformieren: drehen(0);
  }
  100 % {
    Sichtbarkeit: sichtbar;
    oben: 100 %;
    links: 100 %;
    transformieren: drehen (360 Grad);
  }
}
lass schneit = [],
  Gibt den Wert für die Anzahl der Zeichen an, die in der ersten Zeile des Blocks stehen.
für (lass i = 0; i < initCount; i++) {
  sei Einheit = i - 8,
    Geschwindigkeit = i > 3 ? i % 3 : i,
    Größe = 0;
  Geschwindigkeit++;
  wenn (i % 5 == 0) {
    Größe = 10;
  } sonst wenn (i % 8 == 0) {
    Größe = 20;
  } anders {
    Größe = Math.random() * 10;
  }
  schneit.push({
    Abweichung: Einheit * 40, //Positionsverzögerung: Math.random() * 1000, //Verzögerungsgeschwindigkeit: Geschwindigkeit * 3000, //Geschwindigkeitsopazität: Geschwindigkeit / 4,
    Größe: Größe,
    zindex: Größe >= 10 ? 4 : 0
  });
}
lass snows2 = [];
snows.forEach(f => {
  snows2.push({
    ...F,
    Abweichung: schneit[parseInt(Math.random() * initCount)].Abweichung - 10,
    Verzögerung: f.delay + 1000 //Verzögerung });
});
lass snows3 = [];
snows.forEach(f => {
  snows3.push({
    ...F,
    Abweichung: schneit[parseInt(Math.random() * initCount)].Abweichung - 20,
    Verzögerung: f.delay + 2000 //Verzögerung });
});
schneit = schneit.concat(schneit2);
schneit = schneit.concat(schneit3);
snows.sort((a, b) => a.Abweichung - b.Abweichung);
this.snows = schneit;