Slide animation
Create a slide CSS animation effect right in the HTML code
Overview
A slide animation moves an element from far left (horizontal) or far top (vertical) to its final position on the right or the bottom side of the parent container. The parent element, with overflow: hidden, ensures that the element starts and ends outside the visible area, creating a smooth horizontal movement.
Syntax
Default
The default loop:slide-h() or loop:slide-v() without any values or options uses these default parameters:
| Name | Options |
|---|---|
slide-{h|v} |
duration: 2s |
Custom values
You can also customize the animation by changing the options.
Usage
Default
In order to use a slide animation with the default settings, just use loop:slide-h() or loop:slide-v(). In order to preserve the correct behavior, the element must be wrapped in the parent element with the overflow: hidden;.
Custom value
This effect does not support any custom values.
Available options
Here is the list of available options for the slide animation loop.
duration
Change the duration of the animation speed.
direction
Change the direction of the animation using the direction: reversed option.