アクティビティページでの CSS3 アニメーション効果の適用

[
    {
        状態: 0,
        左: 9,
        トップ: -2,
        方向: { rotateZ: 290、色: "#d26754" }
    },
    {
        状態: 0,
        左: 66,
        トップ: 10,
        方向: { rotateZ: 24、色: "#f58351" }
    },
    {
        状態: 0,
        左: 18、
        トップ: 20,
        方向: { rotateZ: 30、色: "#f78351" }
    },
    {
        状態: 0,
        左: -2、
        上: 36.5、
        方向: { rotateZ: 295、色: "#e19d47" }
    },
    {
        状態: 0,
        左: 52、
        上: 49.5、
        方向: { rotateZ: 293、色: "#e19d47" }
    }
]

<div class="item" flex="main:center cross:center"
:style="{left:item.left+'%',top:item.top+'%'}"
v-for="item in items" @click="showReceive(item)">
    <div class="bottom" flex="main:center cross:center">
        <div class="direction" flex="dir:top" :style="{transform:`rotateX(34deg) rotateY(0deg) rotateZ(${item.direction.rotateZ}deg)`}">
            <div class="half"></div>
            <div class="ハーフトラック">
                <div class="矢印"
                :style="{transform: `rotate(${item.direction.rotate}deg`,
                右:`${item.direction.right}px`,
                'border-color': `${item.direction.color} 透明 透明`
                }"></div>
            </div>
        </div>
    </div>
</div>
  。方向 {
    位置: 絶対;
    幅: 20px;
    高さ: 260%;
    。半分 {
      フレックス: 1;
    }
    。追跡 {
      位置: 相対的;
      //上マージン: 90px;
      上マージン: 2em;
      .矢印{
        位置: 絶対;
        幅: 0;
        高さ: 0;
        境界線: 10px 実線;
        border-color: 赤 透明 透明;
        アニメーション: dynamicArrow 3000ms 無限線形;
      }
    }
  }
/* // 動的矢印*/
@keyframes ダイナミック矢印 {
  0% {
    不透明度: 1;
    下部: 100%;
  }
  70% {
    不透明度: 1;
  }
  90% {
    不透明度: 0.1;
    下: -20px;
  }
  100% {
    不透明度: 0;
  }
}

<div class="雪">
  <div class="s_track" :style="{transform:`rotate(45deg) translate(${snow.deviation}px,${-snow.deviation}px)`,'z-index':snow.zindex}" v-for="雪の中の雪">
      <img class="snow" src="/static/original/img/DoubleDenierActivies/cbp_snow.png" :style="{opacity:snow.opacity,animation: `dynamicSnow ${snow.speed}ms ${snow.delay}ms infinite linear`,width:snow.size*1.14+'px',height:snow.size+'px'}"/>
  </div>
</div>
.s_トラック{
  位置: 絶対;
  幅: 220%;
  // 高さ: 10px;
  上: -10px;
  変換の原点: 0 0 0;
  。雪 {
    可視性: 非表示;
    位置: 絶対;
    zインデックス: 2;
    アニメーション: dynamicSnow 2000ms 無限線形;
  }
}
/* //スノーフレーク*/
@keyframes ダイナミックスノー {
  0% {
    可視性: 可視;
    上: 0;
    左: 0;
    変換: 回転(0);
  }
  100% {
    可視性: 可視;
    上: 100%;
    左: 100%;
    変換: 回転(360度);
  }
}
雪 = [] とします。
  初期化カウント = 16;
(i = 0 とします; i < initCount; i++) {
  ユニット = i - 8 とします。
    速度 = i > 3 ? i % 3 : i,
    サイズ = 0;
  スピード++;
  (i % 5 == 0)の場合{
    サイズ = 10;
  } そうでない場合 (i % 8 == 0) {
    サイズ = 20;
  } それ以外 {
    サイズ = Math.random() * 10;
  }
  雪.push({
    偏差: unit * 40, //位置遅延: Math.random() * 1000, //遅延速度: speed * 3000, //速度不透明度: speed / 4,
    サイズ: サイズ、
    zindex: サイズ >= 10 ? 4 : 0
  });
}
snows2 = [] とします。
雪.forEach(f => {
  snows2.push({
    ...f、
    偏差: snows[parseInt(Math.random() * initCount)].偏差 - 10,
    遅延: f.delay + 1000 //遅延 });
});
snows3 = [] とします。
snows.forEach(f => {
  snows3.push({
    ...f、
    偏差: snows[parseInt(Math.random() * initCount)].偏差 - 20,
    遅延: f.delay + 2000 //遅延 });
});
snows = snows.concat(snows2);
snows = snows.concat(snows3);
snows.sort((a, b) => a.deviation - b.deviation);
this.snows = 雪が降る;