CSSの基本アニメーション【スライドインとフェードイン】を実装する方法

<div class="fadein">テキストアニメーション</div>

/*****************************************
 　(1) クラス定義(使用アニメーションと実行時間)               
******************************************/
.fadein {
animation-name: fadeinAnime;         /* 適用するアニメーション */
animation-duration:1.2s;             /* 開始から終了までの時間 */
}
/*****************************************
 　(2) アニメーション定義
******************************************
※ 開始フレームと終了フレームを定義*/
@keyframes fadeinAnime{              /* アニメーション名      */
  from {                             /* ▼ 開始フレーム記述    */
    opacity: 0;                      /* 不透明度 0            */
    transform: translateY(50px);     /* 開始位置 */
  }
  to {                               /* ▼ 終了フレーム記述　  */
    opacity: 1;                      /* 不透明度 1        　  */
    transform: translateY(0px);      /* 終了位置 　　　　     */
  }
}