CSS transition for active only slides.

[aleray]

Make a recipe to show how editors can customize the CSS transitions.

[aleray]

The transition is controled by the CSS3 transition property.

Here is an snippet to paste anywhere in the page (in the introduction preferably) to set the transition duration to 1250ms (instead of the 250ms by default in Olga)

<style>
section[typeof="aa:annotation"] {
    -webkit-transition: all 1250ms ease-out 0s;
       -moz-transition: all 1250ms ease-out 0s;
         -o-transition: all 1250ms ease-out 0s;
        -ms-transition: all 1250ms ease-out 0s;
            transition: all 1250ms ease-out 0s;
}
</style>

Have a look at the page mentioned above for further options.

The aspect of the active annotations can be changed by using this code:

<style>
section[typeof="aa:annotation"].active {
    background-color: red;
}
</style>

For active-only annotations, you can try this (not tested):

<style>
section.active-only section[typeof="aa:annotation"] {
    color: transparent;
    -webkit-transition: all 1250ms ease-out 0s;
       -moz-transition: all 1250ms ease-out 0s;
         -o-transition: all 1250ms ease-out 0s;
        -ms-transition: all 1250ms ease-out 0s;
            transition: all 1250ms ease-out 0s;
}
section.active-only section[typeof="aa:annotation"].active {
    color: inherit;
}
</style>