Image 3

With the script and the annotations in place you can use the generated view transition types to guard your animation rules:

1
:active-view-transition-type(next) {
2
  &::view-transition-old(.img) {
3
    animation: slide-out-left 0.5s ease-out;
4
  }
5
  &::view-transition-new(.img) {
6
    animation: slide-in-left 0.5s ease-out;
7
  }
8
}
9
:active-view-transition-type(same) {
10
  &::view-transition-image-pair(.img) {
11
    animation: blink 0.5s;
12
  }
13
}
14
:active-view-transition-type(prev) {
15
  &::view-transition-old(.img) {
16
    animation: slide-out-right 0.5s ease-out;
17
  }
18
  &::view-transition-new(.img) {
19
    animation: slide-in-right 0.5s ease-out;
20
  }
21
}

The definitions assumes that all the images have the view transition class img.