/* v263: Sivunvaihtoanimaatiot julkaistuille kokeille. * * Tämä tiedosto kopioidaan jokaisen julkaistun kokeen päähakemistoon * (page_transitions.css) — siten kaikki animaation tarvitsemat * keyframet ja luokat ovat löydettävissä myös selaamatta index.php:n * upotettua templatea. * * Animaation kestoa ohjaa --pt-transition-duration -muuttuja, joka * asetetaan index.php:n inline-stylesta {{PAGE_TRANSITION_DURATION_MS}} * -arvolla. Aktivoitavan animaation valinta tapahtuu PageTransitions * -JS-objektin kautta (ks. index.php), joka asettaa :n alle * elementille luokan pt-trans-. * * Animaatiot: * - slide_left : oletus, sivu liukuu oikealle (smoother v260+ tyyli) * - fade : häivytys * - dissolve : häivytys + sumennus * - slide_up : sivu liukuu ylös * - flip_horizontal : 3D-kääntö Y-akselin ympäri * - iris : ympyrä kutistuu keskelle * - zoom_out : pienennys + häivytys * - bouncy : pomppiva slide (lapset) * - book_flip : kirjan sivu kääntyy (lapset) * - tornado : pyörre (lapset) * * Saavutettavuus: prefers-reduced-motion: reduce -käyttäjille kaikki * korvataan rauhalliseen 200 ms cross-fadeen. */ /* Yhteinen pohja: elementti, jolla on jokin pt-trans- -luokka, suorittaa animation-duration / fill-mode -arvot --pt-transition-duration -muuttujan mukaan. animation-name asetetaan kunkin animaation luokassa. */ .pageDiv[class*="pt-trans-"] { animation-duration: var(--pt-transition-duration, 1000ms); animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); will-change: transform, opacity, filter; } /* ==== slide_left (oletus): sivu liukuu oikealle ==== * * v263: Smoother / elegantimpi versio v260:n moveToRight-animaatiosta. * - cubic-bezier(.32, .04, .15, 1) antaa ensin lempeän liikkeellelähdön * ja kiihtyy sitten — sivu "valuu" oikealle eikä lähde napakasti. * - 80%:ssa pieni scale(0.99) + opacity 0.85 antaa syvyysvaikutelman * (sivu vetäytyy hieman taakse) ennen lopullista poistumista. * - 100%:ssa opacity 0 takaa että vanha sivu on täysin näkymättömissä * myös niissä tilanteissa, joissa is-hidden -luokka tulisi * muutoin viiveellä. * * .pageMoveToRight säilytetään aliaksena vanhojen julkaistujen * pakettien yhteensopivuudelle (v260 ja v261 generaattorit lisäsivät * tämän luokan). */ .pt-trans-slide_left, .pageMoveToRight { animation-name: pt-anim-slide_left; animation-timing-function: cubic-bezier(.32, .04, .15, 1); } @keyframes pt-anim-slide_left { 0% { transform: translateX(0) scale(1); opacity: 1; } 80% { transform: translateX(80%) scale(0.99); opacity: 0.85; } 100% { transform: translateX(110%) scale(0.97); opacity: 0; } } /* ==== fade ==== */ .pt-trans-fade { animation-name: pt-anim-fade; } @keyframes pt-anim-fade { from { opacity: 1; } to { opacity: 0; } } /* ==== dissolve (sumennus + häivytys) ==== */ .pt-trans-dissolve { animation-name: pt-anim-dissolve; } @keyframes pt-anim-dissolve { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(8px); } } /* ==== slide_up ==== */ .pt-trans-slide_up { animation-name: pt-anim-slide_up; } @keyframes pt-anim-slide_up { from { transform: translateY(0); } to { transform: translateY(-105%); } } /* ==== flip_horizontal (3D rotateY 90°) ==== */ .pt-trans-flip_horizontal { animation-name: pt-anim-flip_h; } @keyframes pt-anim-flip_h { from { transform: perspective(900px) rotateY(0deg); opacity: 1; } to { transform: perspective(900px) rotateY(90deg); opacity: 0; } } /* ==== iris (ympyrä kutistuu keskelle) ==== */ .pt-trans-iris { animation-name: pt-anim-iris; } @keyframes pt-anim-iris { from { clip-path: circle(140% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } } /* ==== zoom_out ==== */ .pt-trans-zoom_out { animation-name: pt-anim-zoom_out; } @keyframes pt-anim-zoom_out { from { transform: scale(1); opacity: 1; } to { transform: scale(0.6); opacity: 0; } } /* ==== bouncy (lapset): pomppiva slide oikealle ==== */ .pt-trans-bouncy { animation-name: pt-anim-bouncy; animation-timing-function: cubic-bezier(.68,-.55,.27,1.55); } @keyframes pt-anim-bouncy { 0% { transform: translateX(0) scale(1); } 40% { transform: translateX(-6%) scale(1.02); } 100% { transform: translateX(110%) scale(0.95); opacity: 0; } } /* ==== book_flip (lapset): kirjan sivu kääntyy vasemman reunan ympäri ==== */ .pt-trans-book_flip { animation-name: pt-anim-bookflip; transform-origin: left center; } @keyframes pt-anim-bookflip { from { transform: perspective(1200px) rotateY(0deg); box-shadow: 0 0 0 rgba(0,0,0,0); } to { transform: perspective(1200px) rotateY(-110deg); box-shadow: -10px 0 30px rgba(0,0,0,0.25); opacity: 0.4; } } /* ==== tornado (lapset): pyörre ==== */ .pt-trans-tornado { animation-name: pt-anim-tornado; animation-timing-function: ease-in; } @keyframes pt-anim-tornado { from { transform: rotate(0) scale(1) translate(0,0); opacity: 1; filter: blur(0); } to { transform: rotate(540deg) scale(0.1) translate(40%,-40%); opacity: 0; filter: blur(4px); } } /* ==== Saavutettavuus ==== */ @media (prefers-reduced-motion: reduce) { .pageDiv[class*="pt-trans-"], .pageMoveToRight { animation-name: pt-anim-fade !important; animation-duration: 200ms !important; animation-timing-function: ease !important; } }