Tutorial by Examples

Useful for simple animations, the CSS transition property allows number-based CSS properties to animate between states. Example .Example{ height: 100px; background: #fff; } .Example:hover{ height: 120px; background: #ff0000; } View Result By default, hovering over an...

When creating animations and other GPU-heavy actions, it's important to understand the will-change attribute. Both CSS keyframes and the transition property use GPU acceleration. Performance is increased by offloading calculations to the device's GPU. This is done by creating paint layers (parts of...

For multi-stage CSS animations, you can create CSS @keyframes. Keyframes allow you to define multiple animation points, called a keyframe, to define more complex animations. Basic Example In this example, we'll make a basic background animation that cycles between all colors. @keyframes rainbow...

Our first syntax example shows the animation shorthand property using all of the available properties/parameters: animation: 3s ease-in 1s 2 reverse both paused slidein; /* duration | timing-function | delay | iteration-count | di...