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

• 
  

1、本网是非赢利性质的网站，发布文章和转载文章的目的都是为了交流和信息传播，并不意味着本网赞同其观点。
2、本站内容大都来自互联网，内容的真实性、准确性和合法性未经核实，本站不承担法律责任。
3、如果本站内容有侵权情况，请联系本站删除处理。
4、任何通过本网网页和链接得到的资讯和信息，本网概不负责，亦不负任何法律责任。