Animate on Scroll | La boite à outils d'emandarine

https://blog.emandarine.net/grille/templates/template/animAOS/animAos.html

Script à placer dans le head pour que les animations fonctionnent :

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

JavaScript à placer avant la fermeture du body :

<script>AOS.init({});</script>

HTML
A choisir selon l’animation que l’on souhaite :

<div data-aos="fade-up">Fade up</div>

<div data-aos="fade-down">Fade up</div>

<div data-aos="fade-right">Fade up</div>

<div data-aos="fade-left">Fade up</div>

<div data-aos="fade-up-right">Fade up</div>

<div data-aos="fade-up-left">Fade up</div>

<div data-aos="fade-down-right">Fade up</div>

<div data-aos="fade-down-left">Fade up</div>

<div data-aos="flip-left">Fade up</div>

<div data-aos="flip-right">Fade up</div>

<div data-aos="flip-up">Fade up</div>

<div data-aos="flip-down">Fade up</div>

<div data-aos="zoom-in">Fade up</div>

<div data-aos="zoom-in-up">Fade up</div>

<div data-aos="zoom-in-down">Fade up</div>

<div data-aos="zoom-in-left">Fade up</div>

<div data-aos="zoom-in-right">Fade up</div>

<div data-aos="zoom-out">Fade up</div>

<div data-aos="zoom-out-up">Fade up</div>

<div data-aos="zoom-out-down">Fade up</div>

<div data-aos="zoom-out-right">Fade up</div>

<div data-aos="zoom-out-left">Fade up</div>

<div data-aos="fade-up" data-aos-duration="3000"></div>

<div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"></div>

<div data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine"></div>

<div data-aos="fade-left" data-aos-anchor="#example-anchor" data-aos-offset="500" data-aos-duration="500"></div>

<div data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="300" data-aos-offset="0"></div>

<div data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="2000"></div>

<div data-aos="fade-up" data-aos-anchor-placement="top-bottom"></div>

<div data-aos="fade-up" data-aos-anchor-placement="center-bottom"></div>

<div data-aos="fade-up" data-aos-anchor-placement="bottom-bottom"></div>

<div data-aos="fade-up" data-aos-anchor-placement="top-center"></div>

CSS

Fade up :

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos] {
    pointer-events: none;
}

@media screen {
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
    
    html:not(.no-js) [data-aos=fade-up] {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
}

Fade down :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=fade-down] {
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0)
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

Fade right :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=fade-right] {
        -webkit-transform: translate3d(-100px, 0, 0);
        transform: translate3d(-100px, 0, 0)
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

Fade left :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=fade-left] {
        -webkit-transform: translate3d(100px, 0, 0);
        transform: translate3d(100px, 0, 0)
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

Fade right :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=fade-right] {
        -webkit-transform: translate3d(-100px, 0, 0);
        transform: translate3d(-100px, 0, 0)
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

Fade left :

 [data-aos] {
     pointer-events: none
 }
 
 [data-aos].aos-animate {
     pointer-events: auto
 }
 
 [data-aos][data-aos][data-aos-duration="400"],
 body[data-aos-duration="400"] [data-aos] {
     transition-duration: .4s
 }
 
 [data-aos][data-aos][data-aos-easing=ease],
 body[data-aos-easing=ease] [data-aos] {
     transition-timing-function: ease
 }
 
 @media screen {
     html:not(.no-js) [data-aos=fade-up-left] {
         -webkit-transform: translate3d(100px, 100px, 0);
         transform: translate3d(100px, 100px, 0)
     }
     
     html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
         opacity: 0;
         transition-property: opacity, -webkit-transform;
         transition-property: opacity, transform;
         transition-property: opacity, transform, -webkit-transform
     }
     
     html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
         opacity: 1;
         -webkit-transform: none;
         transform: none
     }
 }

Fade down right :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=fade-down-right] {
        -webkit-transform: translate3d(-100px, -100px, 0);
        transform: translate3d(-100px, -100px, 0)
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

Fade down left :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=fade-down-left] {
        -webkit-transform: translate3d(100px, -100px, 0);
        transform: translate3d(100px, -100px, 0)
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

Flip left :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

html:not(.no-js) [data-aos=flip-left] {
    -webkit-transform: perspective(2500px) rotateY(-100deg);
    transform: perspective(2500px) rotateY(-100deg)
}

html:not(.no-js) [data-aos^=flip][data-aos^=flip] {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform
}

html:not(.no-js) [data-aos=flip-left].aos-animate {
    -webkit-transform: perspective(2500px) rotateY(0);
    transform: perspective(2500px) rotateY(0)
}

Flip right :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

html:not(.no-js) [data-aos=flip-right] {
    -webkit-transform: perspective(2500px) rotateY(100deg);
    transform: perspective(2500px) rotateY(100deg)
}

html:not(.no-js) [data-aos^=flip][data-aos^=flip] {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform
}

html:not(.no-js) [data-aos=flip-right].aos-animate {
    -webkit-transform: perspective(2500px) rotateY(0);
    transform: perspective(2500px) rotateY(0)
}

Flip up :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

html:not(.no-js) [data-aos=flip-up] {
    -webkit-transform: perspective(2500px) rotateX(-100deg);
    transform: perspective(2500px) rotateX(-100deg)
}

html:not(.no-js) [data-aos^=flip][data-aos^=flip] {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform
}

html:not(.no-js) [data-aos=flip-up].aos-animate {
    -webkit-transform: perspective(2500px) rotateX(0);
    transform: perspective(2500px) rotateX(0)
}

Flip down :

 [data-aos] {
     pointer-events: none
 }
 
 [data-aos].aos-animate {
     pointer-events: auto
 }
 
 [data-aos][data-aos][data-aos-duration="400"],
 body[data-aos-duration="400"] [data-aos] {
     transition-duration: .4s
 }
 
 [data-aos][data-aos][data-aos-easing=ease],
 body[data-aos-easing=ease] [data-aos] {
     transition-timing-function: ease
 }
 
 html:not(.no-js) [data-aos=flip-down] {
     -webkit-transform: perspective(2500px) rotateX(100deg);
     transform: perspective(2500px) rotateX(100deg)
 }
 
 html:not(.no-js) [data-aos^=flip][data-aos^=flip] {
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     transition-property: -webkit-transform;
     transition-property: transform;
     transition-property: transform, -webkit-transform
 }
 
 html:not(.no-js) [data-aos=flip-down].aos-animate {
     -webkit-transform: perspective(2500px) rotateX(0);
     transform: perspective(2500px) rotateX(0)
 }

Zoom in :

 [data-aos] {
     pointer-events: none
 }
 
 [data-aos].aos-animate {
     pointer-events: auto
 }
 
 [data-aos][data-aos][data-aos-duration="400"],
 body[data-aos-duration="400"] [data-aos] {
     transition-duration: .4s
 }
 
 [data-aos][data-aos][data-aos-easing=ease],
 body[data-aos-easing=ease] [data-aos] {
     transition-timing-function: ease
 }
 
 @media screen {
     html:not(.no-js) [data-aos=zoom-in] {
         -webkit-transform: scale(.6);
         transform: scale(.6)
     }
     
     html:not(.no-js) [data-aos^=zoom][data-aos^=zoom] {
         opacity: 0;
         transition-property: opacity, -webkit-transform;
         transition-property: opacity, transform;
         transition-property: opacity, transform, -webkit-transform
     }
     
     html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate {
         opacity: 1;
         -webkit-transform: translateZ(0) scale(1);
         transform: translateZ(0) scale(1)
     }
 }

Zoom in up :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=zoom-in-up] {
        -webkit-transform: translate3d(0, 100px, 0) scale(.6);
        transform: translate3d(0, 100px, 0) scale(.6)
    }
    
    html:not(.no-js) [data-aos^=zoom][data-aos^=zoom] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate {
        opacity: 1;
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1)
    }
}

Zoom in down :

 [data-aos] {
     pointer-events: none
 }
 
 [data-aos].aos-animate {
     pointer-events: auto
 }
 
 [data-aos][data-aos][data-aos-duration="400"],
 body[data-aos-duration="400"] [data-aos] {
     transition-duration: .4s
 }
 
 [data-aos][data-aos][data-aos-easing=ease],
 body[data-aos-easing=ease] [data-aos] {
     transition-timing-function: ease
 }
 
 @media screen {
     html:not(.no-js) [data-aos=zoom-in-down] {
         -webkit-transform: translate3d(0, -100px, 0) scale(.6);
         transform: translate3d(0, -100px, 0) scale(.6)
     }
     
     html:not(.no-js) [data-aos^=zoom][data-aos^=zoom] {
         opacity: 0;
         transition-property: opacity, -webkit-transform;
         transition-property: opacity, transform;
         transition-property: opacity, transform, -webkit-transform
     }
     
     html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate {
         opacity: 1;
         -webkit-transform: translateZ(0) scale(1);
         transform: translateZ(0) scale(1)
     }
 }

Zoom in left :

 [data-aos] {
     pointer-events: none
 }
 
 [data-aos].aos-animate {
     pointer-events: auto
 }
 
 [data-aos][data-aos][data-aos-duration="400"],
 body[data-aos-duration="400"] [data-aos] {
     transition-duration: .4s
 }
 
 [data-aos][data-aos][data-aos-easing=ease],
 body[data-aos-easing=ease] [data-aos] {
     transition-timing-function: ease
 }
 
 @media screen {
     html:not(.no-js) [data-aos=zoom-in-left] {
         -webkit-transform: translate3d(100px, 0, 0) scale(.6);
         transform: translate3d(100px, 0, 0) scale(.6)
     }
     
     html:not(.no-js) [data-aos^=zoom][data-aos^=zoom] {
         opacity: 0;
         transition-property: opacity, -webkit-transform;
         transition-property: opacity, transform;
         transition-property: opacity, transform, -webkit-transform
     }
     
     html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate {
         opacity: 1;
         -webkit-transform: translateZ(0) scale(1);
         transform: translateZ(0) scale(1)
     }
 }

Zoom in right :

 [data-aos] {
     pointer-events: none
 }
 
 [data-aos].aos-animate {
     pointer-events: auto
 }
 
 [data-aos][data-aos][data-aos-duration="400"],
 body[data-aos-duration="400"] [data-aos] {
     transition-duration: .4s
 }
 
 [data-aos][data-aos][data-aos-easing=ease],
 body[data-aos-easing=ease] [data-aos] {
     transition-timing-function: ease
 }
 
 @media screen {
     html:not(.no-js) [data-aos=zoom-in-right] {
         -webkit-transform: translate3d(-100px, 0, 0) scale(.6);
         transform: translate3d(-100px, 0, 0) scale(.6)
     }
     
     html:not(.no-js) [data-aos^=zoom][data-aos^=zoom] {
         opacity: 0;
         transition-property: opacity, -webkit-transform;
         transition-property: opacity, transform;
         transition-property: opacity, transform, -webkit-transform
     }
     
     html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate {
         opacity: 1;
         -webkit-transform: translateZ(0) scale(1);
         transform: translateZ(0) scale(1)
     }
 }

Zoom out :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=zoom-out] {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    
    html:not(.no-js) [data-aos^=zoom][data-aos^=zoom] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate {
        opacity: 1;
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1)
    }
}

Zoom out up :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=zoom-out-up] {
        -webkit-transform: translate3d(0, 100px, 0) scale(1.2);
        transform: translate3d(0, 100px, 0) scale(1.2)
    }
    
    html:not(.no-js) [data-aos^=zoom][data-aos^=zoom] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate {
        opacity: 1;
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1)
    }
}

Zoom out down :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=zoom-out-down] {
        -webkit-transform: translate3d(0, -100px, 0) scale(1.2);
        transform: translate3d(0, -100px, 0) scale(1.2)
    }
    
    html:not(.no-js) [data-aos^=zoom][data-aos^=zoom] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate {
        opacity: 1;
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1)
    }
}

Zoom out right :

  [data-aos] {
      pointer-events: none
  }
  
  [data-aos].aos-animate {
      pointer-events: auto
  }
  
  [data-aos][data-aos][data-aos-duration="400"],
  body[data-aos-duration="400"] [data-aos] {
      transition-duration: .4s
  }
  
  [data-aos][data-aos][data-aos-easing=ease],
  body[data-aos-easing=ease] [data-aos] {
      transition-timing-function: ease
  }
  
  @media screen {
      html:not(.no-js) [data-aos=zoom-out-right] {
          -webkit-transform: translate3d(-100px, 0, 0) scale(1.2);
          transform: translate3d(-100px, 0, 0) scale(1.2)
      }
      
      html:not(.no-js) [data-aos^=zoom][data-aos^=zoom] {
          opacity: 0;
          transition-property: opacity, -webkit-transform;
          transition-property: opacity, transform;
          transition-property: opacity, transform, -webkit-transform
      }
      
      html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate {
          opacity: 1;
          -webkit-transform: translateZ(0) scale(1);
          transform: translateZ(0) scale(1)
      }
  }

Zoom out left :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=zoom-out-left] {
        -webkit-transform: translate3d(100px, 0, 0) scale(1.2);
        transform: translate3d(100px, 0, 0) scale(1.2)
    }
    
    html:not(.no-js) [data-aos^=zoom][data-aos^=zoom] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate {
        opacity: 1;
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1)
    }
}

Fade up duration 3000 :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

[data-aos][data-aos][data-aos-duration="3000"],
body[data-aos-duration="3000"] [data-aos] {
    transition-duration: 3s
}

@media screen {
    html:not(.no-js) [data-aos=fade-up] {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

Fade up duration 3000 :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

[data-aos][data-aos][data-aos-duration="1500"],
body[data-aos-duration="1500"] [data-aos] {
    transition-duration: 1.5s
}

[data-aos][data-aos][data-aos-easing=linear],
body[data-aos-easing=linear] [data-aos] {
    transition-timing-function: cubic-bezier(.25, .25, .75, .75)
}

@media screen {
    html:not(.no-js) [data-aos=fade-down] {
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0)
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

Fade down linear :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

[data-aos][data-aos][data-aos-easing=ease-in-sine],
body[data-aos-easing=ease-in-sine] [data-aos] {
    transition-timing-function: cubic-bezier(.47, 0, .745, .715)
}

@media screen {
    html:not(.no-js) [data-aos=fade-right] {
        -webkit-transform: translate3d(-100px, 0, 0);
        transform: translate3d(-100px, 0, 0)
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

Fade right ease in sine :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

[data-aos][data-aos][data-aos-duration="500"],
body[data-aos-duration="500"] [data-aos] {
    transition-duration: .5s
}

@media screen {
    html:not(.no-js) [data-aos=fade-left] {
        -webkit-transform: translate3d(100px, 0, 0);
        transform: translate3d(100px, 0, 0)
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

Fade left anchor 500 :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

[data-aos][data-aos][data-aos-delay="300"].aos-animate,
body[data-aos-delay="300"] [data-aos].aos-animate {
    transition-delay: .3s
}

[data-aos][data-aos][data-aos-easing=ease-in-back],
body[data-aos-easing=ease-in-back] [data-aos] {
    transition-timing-function: cubic-bezier(.6, -.28, .735, .045)
}

[data-aos][data-aos][data-aos-delay="300"],
body[data-aos-delay="300"] [data-aos] {
    transition-delay: 0s
}

@media screen {
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

Fade zoom in :

 [data-aos] {
     pointer-events: none
 }
 
 [data-aos].aos-animate {
     pointer-events: auto
 }
 
 [data-aos][data-aos][data-aos-duration="2000"],
 body[data-aos-duration="2000"] [data-aos] {
     transition-duration: 2s
 }
 
 [data-aos][data-aos][data-aos-easing=ease],
 body[data-aos-easing=ease] [data-aos] {
     transition-timing-function: ease
 }
 
 [data-aos][data-aos][data-aos-delay="300"].aos-animate,
 body[data-aos-delay="300"] [data-aos].aos-animate {
     transition-delay: .3s
 }
 
 [data-aos][data-aos][data-aos-easing=ease-out-cubic],
 body[data-aos-easing=ease-out-cubic] [data-aos] {
     transition-timing-function: cubic-bezier(.25, .46, .45, .94)
 }
 
 @media screen {
     html:not(.no-js) [data-aos=flip-left] {
         -webkit-transform: perspective(2500px) rotateY(-100deg);
         transform: perspective(2500px) rotateY(-100deg)
     }
     
     html:not(.no-js) [data-aos=flip-left].aos-animate {
         -webkit-transform: perspective(2500px) rotateY(0);
         transform: perspective(2500px) rotateY(0)
     }
     
     html:not(.no-js) [data-aos^=flip][data-aos^=flip] {
         -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
         transition-property: -webkit-transform;
         transition-property: transform;
         transition-property: transform, -webkit-transform
     }
 }

Flip left 2000 :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=fade-up] {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

Fade up top bottom :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=fade-up] {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

Fade up center bottom :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=fade-up] {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

Fade up bottom bottom :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=fade-up] {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

Fade up top center :

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

@media screen {
    html:not(.no-js) [data-aos=fade-up] {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }
    
    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}