Animations in CSS3

Cascading Style Sheets

3D Animations Using CSS3

CSS3 animations allow animation of most HTML elements.

Each animation needs to be defined with the @keyframes rule which is then called with the animation property.

The animations work well in all major browsers. Opera doesn't implement 3D transforms, but the text will animate without a 3D effect.

How the 3D effect works: There is an outer absolute DIV (#titles) which is rotated along the X-axis using perspective to give the impression of depth. The same DIV also has an :after psuedo-element which applies a linear gradient so the text appears to fade out.

Inside that there is another absolutely-positioned DIV which contains the text (#titlecontent). The top is set to 100% to ensure it starts off-screen then uses CSS3 animation to move it upward over time.

Learn more at: w3schools

and at: CSS Tricks

and next level at: CSS Tricks

Original source: