Marp CLI page transitions showcase
Try making more creative transitions!
@keyframes marp-outgoing-transition-vflip {
0% { animation-timing-function: ease-in; }
50% {
transform: perspective(100vw) translateZ(-100vw) rotateX(-90deg);
opacity: 0.5;
animation-timing-function: step-end;
}
100% { opacity: 0; }
}
@keyframes marp-incoming-transition-vflip {
0% {
animation-timing-function: step-start;
opacity: 0;
}
50% {
transform: perspective(100vw) translateZ(-100vw) rotateX(90deg);
opacity: 0.5;
animation-timing-function: ease-out;
}
}