<script src="https://kit.fontawesome.com/75227c97a9.js" crossorigin="anonymous"></script>

<div>
<i class="fas fa-arrow-up fa-7x"></i>
</div>


div{
  text-align: center;
  margin:0 1em 3em;
  width:100%;
  overflow: hidden;
}

.fa-arrow-up {
   color: #fa534d;
   animation: fadein 2s infinite;
   transform:translateX(100%);      /*開始位置*/
}

@keyframes fadein {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.