スケルトン スクリーンの読み込みプレースホルダー アニメーション効果を実装するための CSS + HTML (アニメーション付き)

<div *ngFor="let item of [1,1,1],index as index" class="skeletonItem anim-opacity2 animation-delay{{index}}">
        <div class="skeletonText"></div>
        <div class="skeletonText" style="width:70%"></div>
        <div class="skeletonText" style="width:40%"></div>
      </div>

.スケルトンアイテム{
      パディング: 16px;
      下境界線: 3px 実線 #eee;
    }

    .スケルトンテキスト{
      高さ: 16px;
      背景: #e2e2e2;
      上マージン: 12px;
      境界線の半径: 4px;
    }

    .skeletonText:最初の子 {
      上マージン: 0;
    }
    .anim-opacity2 {
      アニメーション: 1.5 秒、不透明度 2 0 秒、無限大;
    }
    .アニメーション遅延0 {
      アニメーション遅延: 0秒;
    }
    .アニメーション遅延1 {
      アニメーション遅延: 0.5秒;

    }
    .アニメーション遅延2 {
      アニメーション遅延: 1秒;
    }

    @keyframes 不透明度2 {
      0% {
        不透明度: 0.5
      }
      50% {
        不透明度: 1;
      }
      100% {
        不透明度: 0.5;
      }
    }