michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Spike: change default root animation

Browse source
This commit is contained in:
Matthew Phillips 2023-08-30 17:15:19 -04:00
parent 1efd51fb47
commit 8200a8ab40
1 changed files with 30 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
packages/astro/components/viewtransitions.css
View file

@ -43,6 +43,36 @@
}
}
@layer astro {
::view-transition-old(root) {
animation-name: astroFadeOut;
animation-duration: 180;
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
animation-fill-mode: both;
}
::view-transition-old(new) {
animation-name: astroFadeIn;
animation-duration: 180;
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
animation-fill-mode: both;
}
}
:root[data-astro-transition-fallback="old"]:not([data-astro-transition-scope]) {
animation-name: astroFadeOut;
animation-duration: 180;
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
animation-fill-mode: both;
}
:root[data-astro-transition-fallback="new"]:not([data-astro-transition-scope]) {
animation-name: astroFadeIn;
animation-duration: 180;
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
animation-fill-mode: both;
}
@media (prefers-reduced-motion) {
::view-transition-group(*),
::view-transition-old(*),