The transition between the DeckDeckGo slides could be animated in different ways.

Per default, the animation is the slide effect.


A specific effect could be set using the following properties of the root element <deckgo-deck/>:

transitiontransitionThe animation effect between slides.slide, fade or noneslide


It is also possible to style the fade transition using the following CSS4 variables:

CSS4 variableDefaultNote
--transition-fade-duration500msThe duration of the animation.
--transition-fade-hidden-opacity0.4The base opacity when the slide is not displayed.
--slide-transitionAn optional transition effect for each slide container.

Nota bene

In case you would select the fade or none transition effect and would use the deck's slots actions or background too, please notes that these have to be ordered in last positions of the deck's children otherwise the animation effect will not be able to determine correctly the index of the next slide to animate.