Cacher is the code snippet organizer for pro developers

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

<img [src]="photoUrl" [@photoState]="position" class="photo">

<button (click)="changePosition('move')" class="button">Translate</button>
<button (click)="changePosition('spin')" class="button">Rotate</button>
<button (click)="changePosition('enlarge')" class="button">Scale</button>
<button (click)="changePosition(null)" class="button">Reset</button>

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

@Component({
  selector: 'photo-gallery',
  templateUrl: './photo-gallery.component.html',
  styleUrls: ['./photo-gallery.component.css'],
  animations: [
    trigger("photoState", [
      state("move", style({
        transform: "translateX(-100%) "
      })),
      state("enlarge", style({
        transform: "scale(1.5)"
      })),
      state("spin", style({
        transform: "rotateY(180deg) rotateZ(90deg)"
      })),
      transition("*=>move",
        animate("2000ms", keyframes([
          style({ transform: "translateX(0) rotateY(0)", offset: 0 }),
          style({ transform: "translateX(50%) rotateY(90deg)", offset: 0.33 }),
          style({ transform: "translateY(-75%) rotateY(180deg)", offset: 0.66 }),
          style({ transform: "translateX(-100%) ", offset: 1.0 }),

        ])))
    ])
  ]
})
export class PhotoGalleryComponent {

  position: string;
  photoUrl = "http://lorempixel.com/400/200";

  changePosition(newPosition: string) {
    this.position = newPosition;
  }

}