Reveal Transition Filter Syntax
= Index DOT Css by Brian Wilson =

What is it?

Reveal transition filters are time-varying visual filters allowing content to be transformed in a prescribed manner. Their role is to visually transition a control from one state to another. Scripting languages must be used to change between the beginning and ending states for the 23 possible Reveal transition types. Transition filters can also be specified using syntax in the HTML META element to create blend transitions between page loads.

Syntax

Selector { filter: revealtrans([duration], [transition-type]) }

[duration] - Floating point value representing the length of time used for the transition. Value is given in seconds and milliseconds (eg: 1.234 = 1,234 milliseconds.)

[transition-type] - Integer code value (0-23) indicating the shape of the Reveal transition.

Transition Types

Transition Type	Description
0	Box In - Starts at box outside boundary and goes to center in a rectangular transition.
1	Box Out - Starts at box center and goes to outside boundary in a rectangular transition.
2	Circle In - Starts at box outside boundary and goes to center in a circular transition.
3	Circle Out - Starts at box center and goes to outside boundary in a circular increasing radius transition.
4	Wipe Up - Starts at bottom of box and transition works its way upward.
5	Wipe Down - Starts at top of box and transition works its way downward.
6	Wipe Right - Starts at left side of box and transition works its way to the right.
7	Wipe Left - Starts at right side of box and transition works its way to the left.
8	Vertical Blinds - Segments the box into vertical strips. Transition moves from left to right.
9	Horizontal Blinds - Segments the box into horizontal strips. Transition moves from top to bottom.
10	Checkerboard Across - Segments the box into a grid of squares. Transition moves from left to right.
11	Checkerboard Down - Segments the box into a grid of squares. Transition moves from top to bottom.
12	Random Dissolve - Randomly changes pixels in the box to their new state over the course of the duration time.
13	Split Vertical In - Starts at the left and right sides of the box and moves toward the center (closing sliding double door.)
14	Split Vertical Out - Starts at the center of the box and moves toward the left and right sides (opening sliding double door.)
15	Split Horizontal In - Starts at the top and bottom sides of the box and moves toward the center.
16	Split Horizontal Out - Starts at the center of the box and moves toward the top and bottom sides.
17	Strips Left Down - Starts at upper right corner of box moving toward the bottom left corner in diagonal line (page turn from top right.)
18	Strips Left Up - Starts at bottom right corner of box moving toward the top left corner in diagonal line (page turn from bottom right.)
19	Strips Right Down - Starts at upper left corner of box moving toward the bottom right corner in diagonal line (page turn from top left.)
20	Strips Right Up - Starts at bottom left corner of box moving toward the top right corner in diagonal line (page turn from bottom left.)
21	Random Bars Horizontal - Transition to new state occurs horizontal pixel line-by-line in random fashion until complete.
22	Random Bars Vertical - Transition to new state occurs vertical pixel line-by-line in random fashion until complete.
23	Random - One of the previous 23 reveal filter types is randomly used.