CSS Animated Content Switching (think tabs/panels), using CSS3 Transitions

For a full explanation of this code, please refer to the blogpost at http://www.bram.us/2014/01/05/css-animated-content-switching/

1. Horizontal slide (enter and exit animations running sequential)

A
B
C

2. Horizontal slide (enter and exit animations running concurrently)

A
B
C

3. Vertical Slide (enter and exit animations running sequential), with fade

A
B
C

4. Scaledown and up (enter and exit animations running concurrently)

A
B
C

5. Scaledown and up (enter and exit animations running sequential)

A
B
C

6. Scaledown and up (enter and exit animations running sequential), with fade

A
B
C

7. Per panel different animations

A
B
C

8. Any combo you like … :-)