/* フェードイン */
.fadeIn {
  opacity: 0;
}

.st-fadeIn {
  animation: an-fadeIn 1s 0.5s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  opacity: 0;
}

@keyframes an-fadeIn {
  0% {
    opacity: 0;
    margin: 0;
  }

  100% {
    opacity: 1;
    margin: 50px;
  }
}

/* バウンス */
.bound {
  transform: translateY(0);
}

.st-bound {
  animation: an-bound 1s cubic-bezier(0.33, 1, 0.68, 1) infinite;
  transform: translateY(0);
}

@keyframes an-bound {
  0% {
    transform: translateY(0);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    transform: translateY(-30px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    transform: translateY(0);
  }
}

/* 左から*/
.leftIn {
  transform: translateX(-100px);
  opacity: 0;
}

.st-leftIn {
  animation: an-leftIn 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  transform: translateX(-100px);
  opacity: 0;
}

@keyframes an-leftIn {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* 右から */
.rightIn {
  transform: translateX(100px);
  opacity: 0;
}

.st-rightIn {
  animation: an-rightIn 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  transform: translateX(100px);
  opacity: 0;
}

@keyframes an-rightIn {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* ズームイン */
.zoomIn {
  transform: scale(1.4);
  opacity: 0;
}

.st-zoomIn {
  animation: an-zoomIn 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  transform: scale(1.4);
  opacity: 0;
}

@keyframes an-zoomIn {
  0% {
    opacity: 0;
    transform: scale(1.4);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 下から上 */
.upIn {
  transform: translateY(75px);
  opacity: 0;
}

.st-upIn {
  animation: an-upIn 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  transform: translateY(75px);
  opacity: 0;
}

@keyframes an-upIn {
  0% {
    opacity: 0;
    transform: translateY(75px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 上から下 */
.upIn {
  transform: translateY(-75px);
  opacity: 0;
}

.st-upIn {
  animation: an-upIn 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  transform: translateY(-75px);
  opacity: 0;
}

@keyframes an-upIn {
  0% {
    opacity: 0;
    transform: translateY(-75px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*ステップ*/
.delay02 {
  animation-delay: 0.05s;
}

.delay03 {
  animation-delay: 0.1s;
}

.delay04 {
  animation-delay: 0.15s;
}

.delay05 {
  animation-delay: 0.2s;
}

.delay06 {
  animation-delay: 0.25s;
}

.delay07 {
  animation-delay: 0.3s;
}

.delay08 {
  animation-delay: 0.35s;
}

.delay09 {
  animation-delay: 0.4s;
}

.delay10 {
  animation-delay: 0.45s;
}

.delay11 {
  animation-delay: 0.5s;
}

.delay12 {
  animation-delay: 0.55s;
}

.delay13 {
  animation-delay: 0.6s;
}

.delay14 {
  animation-delay: 0.65s;
}

.delay15 {
  animation-delay: 0.7s;
}