React UI
Edit page
Home
Getting Started
Customize
Foundation
Components: UI
Components: Layouts
CSS Helpers
Animation Box Alignment Colors Display Spacing Typography
Readme

# Animation

The animation helper allows applying simple animations to UI elements.

👉 Remember that non-block inline elements (ie. an unstyled
`span` or elements that have `display: inline`) cannot be animated.

`.animation-spin-clockwise`

`.animation-spin-counterclockwise`

<> <p> <code className="mr-3">.animation-spin-clockwise</code> <span className="d-inline-flex animation-spin-clockwise"> <Icon icon="loading" /> </span> </p> <p> <code className="mr-3">.animation-spin-counterclockwise</code> <span className="d-inline-flex animation-spin-counterclockwise"> <Icon icon="loading" /> </span> </p> </>

    <>  <p>    <code className="mr-3">.animation-spin-clockwise</code>    <span className="d-inline-flex animation-spin-clockwise">      <Icon icon="loading" />    </span>  </p>  <p>    <code className="mr-3">.animation-spin-counterclockwise</code>    <span className="d-inline-flex animation-spin-counterclockwise">      <Icon icon="loading" />    </span>  </p></>

Next:
Box Alignment →