Rotate

Basic animations for rotating elements around its center.

Rotate Full Right

Rotate an element 360 degrees clockwise.

To use this animation add simple-animation sa-rotate-full-right classes to the element you want to animate.

Rotate 360 degrees clockwise.

Options

No RepeatInfinite RepeatRepeat Animation

Quadruple DurationTriple DurationDouble DurationNormal DurationHalf DurationThird DurationQuarter DurationAnimation Duration

Delay Animation

<div className="simple-animation sa-rotate-full-right">Rotate 360 degrees clockwise.</div>

Rotate Full Left

Rotate an element 360 degrees counter-clockwise.

To use this animation add simple-animation sa-rotate-full-left classes to the element you want to animate.

Rotate 360 degrees counter-clockwise.

Options

No RepeatInfinite RepeatRepeat Animation

Quadruple DurationTriple DurationDouble DurationNormal DurationHalf DurationThird DurationQuarter DurationAnimation Duration

Delay Animation

<div className="simple-animation sa-rotate-full-left">Rotate 360 degrees counter-clockwise.</div>

Rotate Half Right

Rotate an element 180 degrees clockwise.

To use this animation add simple-animation sa-rotate-half-right classes to the element you want to animate.

Rotate 180 degrees clockwise.

Options

No RepeatInfinite RepeatRepeat Animation

Quadruple DurationTriple DurationDouble DurationNormal DurationHalf DurationThird DurationQuarter DurationAnimation Duration

Delay Animation

<div className="simple-animation sa-rotate-half-right">Rotate 180 degrees clockwise.</div>

Rotate Half Left

Rotate an element 180 degrees counter-clockwise.

To use this animation add simple-animation sa-rotate-half-left classes to the element you want to animate.

Rotate 180 degrees counter-clockwise.

Options

No RepeatInfinite RepeatRepeat Animation

Quadruple DurationTriple DurationDouble DurationNormal DurationHalf DurationThird DurationQuarter DurationAnimation Duration

Delay Animation

<div className="simple-animation sa-rotate-half-left">Rotate 180 degrees counter-clockwise.</div>

Rotate Quarter Right

Rotate an element 90 degrees clockwise.

To use this animation add simple-animation sa-rotate-quarter-right classes to the element you want to animate.

Rotate 90 degrees clockwise.

Options

No RepeatInfinite RepeatRepeat Animation

Quadruple DurationTriple DurationDouble DurationNormal DurationHalf DurationThird DurationQuarter DurationAnimation Duration

Delay Animation

<div className="simple-animation sa-rotate-quarter-right">Rotate 90 degrees clockwise.</div>

Rotate Quarter Left

Rotate an element 90 degrees counter-clockwise.

To use this animation add simple-animation sa-rotate-quarter-left classes to the element you want to animate.

Rotate 90 degrees counter-clockwise.

Options

No RepeatInfinite RepeatRepeat Animation

Quadruple DurationTriple DurationDouble DurationNormal DurationHalf DurationThird DurationQuarter DurationAnimation Duration

Delay Animation

<div className="simple-animation sa-rotate-quarter-left">Rotate 90 degrees counter-clockwise.</div>

Rotate Three Quarters Right

Rotate an element 270 degrees clockwise.

To use this animation add simple-animation sa-rotate-three-quarters-right classes to the element you want to animate.

Rotate 270 degrees clockwise.

Options

No RepeatInfinite RepeatRepeat Animation

Quadruple DurationTriple DurationDouble DurationNormal DurationHalf DurationThird DurationQuarter DurationAnimation Duration

Delay Animation

<div className="simple-animation sa-rotate-three-quarters-right">Rotate 270 degrees clockwise.</div>

Rotate Three Quarters Left

Rotate an element 270 degrees counter-clockwise.

To use this animation add simple-animation sa-rotate-three-quarters-left classes to the element you want to animate.

Rotate 270 degrees counter-clockwise.

Options

No RepeatInfinite RepeatRepeat Animation

Quadruple DurationTriple DurationDouble DurationNormal DurationHalf DurationThird DurationQuarter DurationAnimation Duration

Delay Animation

<div className="simple-animation sa-rotate-three-quarters-left">Rotate 270 degrees counter-clockwise.</div>