| 1 | @keyframes enter-slide-right { |
| 2 | 0% { |
| 3 | opacity: 0; |
| 4 | translate: -200px 0; |
| 5 | } |
| 6 | 100% { |
| 7 | opacity: 1; |
| 8 | translate: 0 0; |
| 9 | } |
| 10 | } |
| 11 | |
| 12 | @keyframes enter-slide-left { |
| 13 | 0% { |
| 14 | opacity: 0; |
| 15 | translate: 200px 0; |
| 16 | } |
| 17 | 100% { |
| 18 | opacity: 1; |
| 19 | translate: 0 0; |
| 20 | } |
| 21 | } |
| 22 | |
| 23 | @keyframes exit-slide-right { |
| 24 | 0% { |
| 25 | opacity: 1; |
| 26 | translate: 0 0; |
| 27 | } |
| 28 | 100% { |
| 29 | opacity: 0; |
| 30 | translate: 200px 0; |
| 31 | } |
| 32 | } |
| 33 | |
| 34 | @keyframes exit-slide-left { |
| 35 | 0% { |
| 36 | opacity: 1; |
| 37 | translate: 0 0; |
| 38 | } |
| 39 | 100% { |
| 40 | opacity: 0; |
| 41 | translate: -200px 0; |
| 42 | } |
| 43 | } |
| 44 | |
| 45 | ::view-transition-new(.slide-right) { |
| 46 | animation: enter-slide-right ease-in 0.25s; |
| 47 | } |
| 48 | ::view-transition-old(.slide-right) { |
| 49 | animation: exit-slide-right ease-in 0.25s; |
| 50 | } |
| 51 | ::view-transition-new(.slide-left) { |
| 52 | animation: enter-slide-left ease-in 0.25s; |
| 53 | } |
| 54 | ::view-transition-old(.slide-left) { |
| 55 | animation: exit-slide-left ease-in 0.25s; |
| 56 | } |
| 57 | |
| 58 | ::view-transition-new(.enter-slide-right):only-child { |
| 59 | animation: enter-slide-right ease-in 0.25s forwards; |
| 60 | } |
| 61 | ::view-transition-old(.exit-slide-left):only-child { |
| 62 | animation: exit-slide-left ease-in 0.25s forwards; |
| 63 | } |
| 64 | |
| 65 | :root:active-view-transition-type(navigation-back) { |
| 66 | &::view-transition-new(.slide-on-nav) { |
| 67 | animation: enter-slide-right ease-in 0.25s; |
| 68 | } |
| 69 | &::view-transition-old(.slide-on-nav) { |
| 70 | animation: exit-slide-right ease-in 0.25s; |
| 71 | } |
| 72 | } |
| 73 | |
| 74 | :root:active-view-transition-type(navigation-forward) { |
| 75 | &::view-transition-new(.slide-on-nav) { |
| 76 | animation: enter-slide-left ease-in 0.25s; |
| 77 | } |
| 78 | &::view-transition-old(.slide-on-nav) { |
| 79 | animation: exit-slide-left ease-in 0.25s; |
| 80 | } |
| 81 | } |