CSS+HTML zur Implementierung des Platzhalter-Animationseffekts beim Laden des Skeleton-Bildschirms (mit Animation)

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

.skeletonItem {
      Polsterung: 16px;
      Rahmen unten: 3px durchgezogen #eee;
    }

    .skeletonText {
      Höhe: 16px;
      Hintergrund: #e2e2e2;
      Rand oben: 12px;
      Rahmenradius: 4px;
    }

    .skeletonText:erstes-Kind {
      Rand oben: 0;
    }
    .anim-opacity2 {
      Animation: 1,5 s Deckkraft 2 0 s unendlich;
    }
    .animation-delay0 {
      Animationsverzögerung: 0 s;
    }
    .animation-delay1 {
      Animationsverzögerung: 0,5 s;

    }
    .animation-delay2 {
      Animationsverzögerung: 1 s;
    }

    @keyframes opacity2 {
      0% {
        Deckkraft: 0,5
      }
      50 % {
        Deckkraft: 1;
      }
      100 % {
        Deckkraft: 0,5;
      }
    }