aos.css 动画效果

aos网址

https://codepen.io/michalsnik/pen/WxNdvq

<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>

<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>

<div class="item" data-aos="slide-up">7</div>

<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>

 

* {
box-sizing: border-box;
}

.item {
width: 200px;
height: 200px;
margin: 50px auto;
padding-top: 75px;
background: #ccc;
text-align: center;
color: #FFF;
font-size: 3em;
}

 

AOS.init({
duration: 1200,
})

 

 

淡入淡出动画：

• fade-up
• fade-down
• fade-left
• fade-right
• fade-up-right
• fade-up-left
• fade-down-right
• fade-down-left

翻转动画：

• flip-up
• flip-down
• flip-left
• flip-right

滑动动画：

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

缩放动画：

• zoom-in
• zoom-in-up
• zoom-in-down
• zoom-in-left
• zoom-in-right
• zoom-out
• zoom-out-up
• zoom-out-down
• zoom-out-left
• zoom-out-right

锚位置

• top-bottom
• top-center
• top-top
• center-bottom
• center-center
• center-top
• bottom-bottom
• bottom-center
• bottom-top

easing动画

你可以使用以下的一些easing动画效果：

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• ease-in-back
• ease-out-back
• ease-in-out-back
• ease-in-sine
• ease-out-sine
• ease-in-out-sine
• ease-in-quad
• ease-out-quad
• ease-in-out-quad
• ease-in-cubic
• ease-out-cubic
• ease-in-out-cubic
• ease-in-quart
• ease-out-quart
• ease-in-out-quart