Advanced

Animate with CSS @keyframes

The following example demonstrate how to easily apply CSS @keyframes animation on your React component.

Animate Components in sequences

React simple animation provides the ability to chain up your animations in sequences, the following example will animation components one after another by referring each component's sequenceIndex.

Animate SVG

You can use <Animate /> to animate svg elements, the following example will animate the path element within the svg.

AnimateKeyFrames to create looping animation

Fire wave effect with AnimateKeyFrames

Use Hooks to control Animate

Toggle animation is even simpler.