animation

Keyframes

For more detailed reading, the text click on the div to pause the animation.

Keyframes allow us to set up animation depend on specific frames. These frames are conceptual since it has to do with properties rather than a particular image like a frame in a movie. The browser will then calculate the intermediate values of the properties so that it will know how to smoothly transition from one keyframe to another thus making a nice animation.

In this case, the properties are transform and opacity. The text will move and fade. It's a bit complicated because it uses 3D transformations.

This particular page uses vw and vh to help the page work with many screens. Addittionally, it has differences for portrait and landscape viewing.