Timing is entirely managed via the CSS styles.
Animations are just set with different delays and sometimes with a different length.
They are launched automatically in “auto switch mode” or when a user clicks on an arrow or a navigation dot.
Every element in the slide has is own animation, for specific context (eg. element p when slide goes from right to left will use the animation called toLeftAnim2) :
.da-slide-toleft p {
-webkit-animation: toLeftAnim2 0.6s ease-in 0.3s both;
-webkit-animation-name: toLeftAnim2;
-webkit-animation-duration: 0.6s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay: 0.3s;
-webkit-animation-iteration-count: initial;
-webkit-animation-direction: initial;
-webkit-animation-fill-mode: both;
}
Others slides elements in the same context move faster or slower, and with different delays because in theirs own animations (eg: .da-slide-toleft h2, with the animation toLeftAnim1), CSS values are different:
.da-slide-toleft h2 {
-webkit-animation: toLeftAnim1 0.6s ease-in both;
-webkit-animation-name: toLeftAnim1;
-webkit-animation-duration: 0.6s;
...
-webkit-animation-delay: initial;
....
}
NB: this CSS code is not the one in the stylesheet but a summary extracted from Chrome Dev tool to illustrate the example ??
