Cacher is the code snippet organizer for pro developers

.photo{
  margin-bottom: 100px;
  margin-left: 100px;
}

<div [@photosAnimation]="photos.length">
  <div *ngFor="let photo of photos">
    <img [src]="photo" >
  </div>
</div>

import { Component } from '@angular/core';
import {
  trigger,
  state,
  style,
  transition,
  animate,
  keyframes,
  query,
  stagger
} from '@angular/animations';

@Component({
  selector: 'photo-gallery',
  templateUrl: './photo-gallery.component.html',
  styleUrls: ['./photo-gallery.component.css'],
  animations: [
    trigger("photosAnimation", [
      transition("*=>*", [
        query("img", style({ transform: "translateX(-100%)" })),
        query("img",
          stagger("600ms", [
            animate("900ms", style({ transform: "translateX(0)" }))]))
      ])
    ])
  ]
})
export class PhotoGalleryComponent {

  photos = Array(4).fill(1).map((x,i)=>`http://via.placeholder.com/350x150`);

}