Authoring Transitions

The behavior of transitions from one slide to another are specified in CSS. You specify the transition you want by putting a classname on the body tag.

Slides have 2 states: showing and hidden. By default, a slide is showing. Adding the ‘hidden’ class to it will transition it out. Removing the ‘hidden’ class will transition it in.

Example

In the CSS:

.fade section {
	/* showing state */
	opacity: 1;
	/* transition or animation to remove the current slide */
	-webkit-transition: opacity 0.75s;
}
.fade section.hidden {
	/* hidden state */
	opacity: 0;
}

Resources

• Apple documentation on WebKit transitions
• Apple documentation on WebKit animations