Turn: Basic
Exit
Enter
This demonstrates page animations with Turn (without View Transitions). Tap the Turn/Lorem links in the navigation bar to view.
Next example or back to examples
/* Set up animation timings for targeted elements */
[data-turn-exit],
[data-turn-enter] {
animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);
animation-fill-mode: forwards;
}
/* Apply exit animations */
html.turn-advance.turn-exit [data-turn-exit] {
animation-name: fade-out-up;
animation-duration: .3s;
}
/* Apply enter animations */
html.turn-advance.turn-enter [data-turn-enter] {
animation-name: fade-in-up;
animation-duration: .6s;
}
/* For smoothness */
html.turn-before-exit [data-turn-exit],
html.turn-exit [data-turn-exit] {
will-change: transform, opacity;
}
/* (Define animation keyframes here) */