astro-vtbot
Version:
The 👜 Bag of Tricks ✨ for Astro's View Transitions
60 lines (59 loc) • 1.2 kB
CSS
@keyframes FwdMoveOut {
from {
transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(-10cm, 0, -50cm) rotate3d(1, 0, 0, 45deg);
opacity: 1;
}
to {
transform: translate3d(-50cm, 0, -50cm) rotate3d(1, 0, 0, 0);
opacity: 0;
}
}
@keyframes FwdMoveIn {
from {
transform: translate3d(50cm, 0, -50cm) rotate3d(1, 0, 0, 0);
opacity: 0;
}
50% {
transform: translate3d(10cm, 0, -50cm) rotate3d(1, 0, 0, -45deg);
opacity: 1;
}
to {
transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 0);
opacity: 1;
}
}
@keyframes BwdMoveOut {
from {
transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(10cm, 0, -50cm) rotate3d(1, 0, 0, -45deg);
opacity: 1;
}
to {
transform: translate3d(50cm, 0, -50cm) rotate3d(1, 0, 0, 0);
opacity: 0;
}
}
@keyframes BwdMoveIn {
from {
transform: translate3d(-50cm, 0, -50cm) rotate3d(1, 0, 0, 0);
opacity: 0;
}
50% {
transform: translate3d(-10cm, 0, -50cm) rotate3d(1, 0, 0, 45deg);
opacity: 1;
}
to {
transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 0);
opacity: 1;
}
}
::view-transition-image-pair(*) {
perspective: 50cm;
}