AOS-CSS

Animate On Scroll - Pure CSS

Beautiful scroll-triggered animations using only CSS. No JavaScript required! Built with the latest CSS timeline-trigger features.

⚠️ Browser Support

This library uses cutting-edge CSS scroll-triggered animations (timeline-trigger). Currently supported in:

  • Chrome/Edge 145+ (Released 2026)
  • Other browsers coming soon

In unsupported browsers, elements remain visible without animations (graceful degradation).

Fade Animations

fade

Simple fade in effect

fade-up

Fade in from bottom

fade-down

Fade in from top

fade-left

Fade in from right

fade-right

Fade in from left

fade-up-right

Diagonal animation

fade-up-left

Diagonal animation

fade-down-right

Diagonal animation

fade-down-left

Diagonal animation

Zoom Animations

zoom-in

Scale from small

zoom-in-up

Zoom with upward motion

zoom-in-down

Zoom with downward motion

zoom-in-left

Zoom with left motion

zoom-in-right

Zoom with right motion

zoom-out

Scale from large

zoom-out-up

Zoom out with motion

zoom-out-down

Zoom out with motion

Slide Animations

slide-up
slide-down
slide-left
slide-right

Flip Animations

flip-up

3D flip from bottom

flip-down

3D flip from top

flip-left

3D flip from right

flip-right

3D flip from left

Special Animations

bounce-in

Bouncy entrance

bounce-in-up

Bounce from bottom

bounce-in-down

Bounce from top

bounce-in-left

Bounce from right

bounce-in-right

Bounce from left

rotate-in

Rotating entrance

rotate-in-up-left

Rotate with diagonal motion

rotate-in-down-right

Rotate with diagonal motion

Customization Options

Duration

Control animation speed with data-aos-duration

Fast (400ms)
Normal (800ms)
Slow (1600ms)
<div data-aos="fade-up" data-aos-duration="400">Fast</div>
<div data-aos="fade-up" data-aos-duration="1600">Slow</div>

Delay

Stagger animations with data-aos-delay

No delay
200ms delay
400ms delay
600ms delay
<div data-aos="fade-up" data-aos-delay="0">First</div>
<div data-aos="fade-up" data-aos-delay="200">Second</div>
<div data-aos="fade-up" data-aos-delay="400">Third</div>

Easing

Change animation timing with data-aos-easing

Linear
Ease-in-out
Ease-out-back
<div data-aos="fade-up" data-aos-easing="ease-out-back">Bouncy</div>

Distance

Adjust travel distance with data-aos-distance

Small (25px)
Normal (50px)
Large (100px)
<div data-aos="fade-up" data-aos-distance="small">Small</div>
<div data-aos="fade-up" data-aos-distance="large">Large</div>

Once Mode

Animation plays only once with data-aos-once="true"

This animation only plays once (doesn't reverse when scrolling back up)
<div data-aos="fade-up" data-aos-once="true">Once only</div>

Anchor Placement

Control when animation triggers with data-aos-anchor-placement

top-bottom
(triggers early)
center-center
(centered)
bottom-top
(triggers late)
<div data-aos="fade-up" data-aos-anchor-placement="top-center">...</div>

Usage Examples

Basic Setup

<!-- 1. Include the CSS file -->
<link rel="stylesheet" href="aos-css.css">

<!-- 2. Add data-aos attribute to any element -->
<div data-aos="fade-up">Content</div>

Advanced Example

<div
data-aos="fade-up"
data-aos-duration="1000"
data-aos-delay="200"
data-aos-easing="ease-out-back"
data-aos-distance="large"
data-aos-once="true"
data-aos-anchor-placement="center-center"
>
Beautiful animated content!
</div>

Staggered Cards

<div class="grid">
<div data-aos="fade-up" data-aos-delay="0">Card 1</div>
<div data-aos="fade-up" data-aos-delay="100">Card 2</div>
<div data-aos="fade-up" data-aos-delay="200">Card 3</div>
<div data-aos="fade-up" data-aos-delay="300">Card 4</div>
</div>
🚀 Performance Note

AOS-CSS uses native CSS scroll-triggered animations which are GPU-accelerated and highly performant. Unlike JavaScript-based solutions, these animations run on the compositor thread, ensuring smooth 60fps animations even on lower-end devices.