<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

<div class="item" data-aos="fade-up">
fade-up<small>(下から上へ出現)</small>
</div>

<div class="item" data-aos="fade-right">
fade-right<small>(左から右へ出現)</small>
</div>

<div class="item" data-aos="fade-left">
fade-left<small>(右から左へ出現)</small>
</div>

<div class="item" data-aos="fade-down">
fade-down<small>(上から下へ出現)</small>
</div>
@import "https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css";


.item {
  width: 40%;
  padding: 48px;
  background-color: #f2f2f2;
  color: #444;
  font-weight: bold;
  margin-bottom: 200px;
  font-size: 24px;
  text-align: center;
}

.item > small {
  padding-top: 10px;
  font-size: 11px;
  display: block;
  color: #999;
}

AOS.init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.