Animation Properties
The animation by default plays over 2 seconds, has no delay, goes in a linear manner, infinitely.
You can change this using animation properties.
Animation Duration
Change animation duration to any of the following values with the classes(duration in seconds):
Animation Count
Change animation count to any of the following values with the classes:
Animation Delay
Change animation delay to any of the following values with the classes:
Animation Direction
Decide the direction in which animation will go:
- Forward Class: anim-dir-normal | anim-dir-forward
- Backward Class: anim-dir-reverse | anim-dir-backward
- Alternate forward backward Class: anim-dir-forward-backward | anim-dir-alternate
- Alternate reverse backward forward Class: anim-dir-backward-forward | anim-dir-alternate-reverse
Animation Fill mode
Decide if the animation's effects will stay before and / or after the animation is completed.
Usually, after the animation is completed, the changes made through the animation will not stay. This helps change that.
- Stay after end Class: anim-stay-end | anim-fill-forwards
- Stay before Class: anim-stay-start | anim-fill-backwards
- Stay after and before Class: anim-stay | anim-fill-both
- None Class: anim-fill-none | anim-dir-alternate-reverse
Animation Speed
At what speed should the animation go:
- Linear: The same speed throughout: Class: anim-speed-linear | anim-speed-straight
- Ease: Slow start, fast in middle, slow end: Class: anim-speed-ease | anim-speed-normal
- Ease in: The starting is slower than the rest: Class: anim-speed-slow-start | anim-speed-ease-in
- Ease out: The ending is slower than the rest: Class: anim-speed-slow-end | anim-speed-ease-out
- Ease in out: A slow start and a slow end: Class: anim-speed-slow-start-end | anim-speed-ease-in-out