Css Zero Showcase
x
1
<a target="_blank" class="font-medium underline" href="https://csszero.lazaronixon.com/fruits">Click here to go to the example</a>
1
<%= link_to "Click here to go to the example", main_app.fruits_url, target: "_blank", class: "font-medium underline" %>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.auto-animate > * {
  view-transition-class: auto-animation;
}
::view-transition-old(.auto-animation):only-child {
  animation: var(--animate-fade-out) forwards;
  animation-duration: var(--time-300);
  opacity: 1;
}
::view-transition-new(.auto-animation):only-child {
  animation: var(--animate-fade-in) forwards;
  animation-duration: var(--time-300);
  opacity: 0;
}
Java Script is not required or multiple files are needed, check the notes.