HTML
<div class="slideinTop">テキストでも画像でもOKです。</div>

CSS
.slideinTop {
  animation: slideinTop 3s infinite;
}

@keyframes slideinTop {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

HTML
<div class="slideinBottom">テキストでも画像でもOKです。</div>

CSS
.slideinBottom {
  animation: slideinBottom 3s infinite;
}

@keyframes slideinBottom {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
  }
}

HTML
<div class="slideinLeft">テキストでも画像でもOKです。</div>

CSS
.slideinLeft {
  animation: slideinLeft 3s infinite;
}

@keyframes slideinLeft {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0);
  }
}

HTML
<div class="slideinRight">テキストでも画像でもOKです。</div>

CSS
.slideinRight {
  animation: slideinRight 3s infinite;
}

@keyframes slideinRight {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0);
  }
}