Animation
Fade Animation
Fade Up
<div data-aos="fade-up"></div>
Fade Down
<div data-aos="fade-down"></div>Fade Right
<div data-aos="fade-right"></div>Fade Left
<div data-aos="fade-left"></div>Fade Up Right
<div data-aos="fade-up-right"></div>Fade Up Left
<div data-aos="fade-up-left"></div>Fade Down Right
<div data-aos="fade-down-right"></div>Fade Down Left
<div data-aos="fade-down-left"></div>Flip Animation
Flip Left
<div data-aos="flip-left"></div>Flip Right
<div data-aos="flip-right"></div>Flip Up
<div data-aos="flip-up"></div>Flip Down
<div data-aos="flip-down"></div>Zoom Animation
Zoom In
<div data-aos="zoom-in"></div>Zoom In Up
<div data-aos="zoom-in-up"></div>Zoom In Down
<div data-aos="zoom-in-down"></div>Zoom In Right
<div data-aos="zoom-in-right"></div>Zoom In Left
<div data-aos="zoom-in-left"></div>Zoom Out
<div data-aos="zoom-in"></div>Zoom Out Up
<div data-aos="zoom-out-up"></div>Zoom Out Down
<div data-aos="zoom-out-down"></div>Zoom Out Right
<div data-aos="zoom-out-right"></div>Zoom Out Left
<div data-aos="zoom-out-left"></div>Animation Examples
Duration
<div data-aos="fade-up" data-aos-duration="3000"></div>Easing="linear"
<div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"></div>Offset
<div data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine"></div>Offset
<div data-aos="fade-left" data-aos-offset="500" data-aos-duration="500"></div>Easing="ease-in-back"
<div data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="300" data-aos-offset="0"></div>Easing="ease-out-cubic"
<div data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="2000"></div>