Slide
Basic animations for sliding elements into their final position.
Slide In
Slides an element in from the specified direction.
These animations can be combined with any utility class to delay, repeat or change the speed of the animation.
Slide In Left
Slides an element in from the left.
To use this animation add simple-animation sa-slide-in-left classes to the element you want to animate.
<div className="simple-animation sa-slide-in-left">Slide in from the left.</div>
Slide In Right
Slides an element in from the right.
To use this animation add simple-animation sa-slide-in-right classes to the element you want to animate.
<div className="simple-animation sa-slide-in-right">Slide in from the right.</div>
Slide In Top
Slides an element in from the top.
To use this animation add simple-animation sa-slide-in-top classes to the element you want to animate.
<div className="simple-animation sa-slide-in-top">Slide in from the top.</div>
Slide In Bottom
Slides an element in from the bottom.
To use this animation add simple-animation sa-slide-in-bottom classes to the element you want to animate.
<div className="simple-animation sa-slide-in-bottom">Slide in from the bottom.</div>
Slide In Top Left
Slides an element in from the top left.
To use this animation add simple-animation sa-slide-in-top-left classes to the element you want to animate.
<div className="simple-animation sa-slide-in-top-left">Slide in from the top left.</div>
Slide In Top Right
Slides an element in from the top right.
To use this animation add simple-animation sa-slide-in-top-right classes to the element you want to animate.
<div className="simple-animation sa-slide-in-top-right">Slide in from the top right.</div>
Slide In Bottom Left
Slides an element in from the bottom left.
To use this animation add simple-animation sa-slide-in-bottom-left classes to the element you want to animate.
<div className="simple-animation sa-slide-in-bottom-left">Slide in from the bottom left.</div>
Slide In Bottom Right
Slides an element in from the bottom right.
To use this animation add simple-animation sa-slide-in-bottom-right classes to the element you want to animate.
<div className="simple-animation sa-slide-in-bottom-right">Slide in from the bottom right.</div>
Slide Out
Slides an element out to the specified direction.
These animations can be combined with any utility class to delay, repeat or change the speed of the animation.
Slide Out Left
Slides an element out to the left.
To use this animation add simple-animation sa-slide-out-left classes to the element you want to animate.
<div className="simple-animation sa-slide-out-left">Slide out to the left.</div>
<div className="simple-animation sa-slide-out-left-then-display-none">Slide out to the left.</div>
Slide Out Right
Slides an element out to the right.
To use this animation add simple-animation sa-slide-out-right classes to the element you want to animate.
<div className="simple-animation sa-slide-out-right">Slide out to the right.</div>
Slide Out Top
Slides an element out to the top.
To use this animation add simple-animation sa-slide-out-top classes to the element you want to animate.
<div className="simple-animation sa-slide-out-top">Slide out to the top.</div>
Slide Out Bottom
Slides an element out to the bottom.
To use this animation add simple-animation sa-slide-out-bottom classes to the element you want to animate.
<div className="simple-animation sa-slide-out-bottom">Slide out to the bottom.</div>
Slide Out Top Left
Slides an element out to the top left.
To use this animation add simple-animation sa-slide-out-top-left classes to the element you want to animate.
<div className="simple-animation sa-slide-out-top-left">Slide out to the top left.</div>
Slide Out Top Right
Slides an element out to the top right.
To use this animation add simple-animation sa-slide-out-top-right classes to the element you want to animate.
<div className="simple-animation sa-slide-out-top-right">Slide out to the top right.</div>
Slide Out Bottom Left
Slides an element out to the bottom left.
To use this animation add simple-animation sa-slide-out-bottom-left classes to the element you want to animate.
<div className="simple-animation sa-slide-out-bottom-left">Slide out to the bottom left.</div>
Slide Out Bottom Right
Slides an element out to the bottom right.
To use this animation add simple-animation sa-slide-out-bottom-right classes to the element you want to animate.
<div className="simple-animation sa-slide-out-bottom-right">Slide out to the bottom right.</div>