cssで要素を下から上に表示させる

cssで要素を下から上に表示させる方法になります。
各記述した内容の、解説もしております！
記述を変えれば、表示させる開始時間など変えられます。

例)コード

太郎を下から上に表示させます。
こちらは
・最初は表示されていない
・1秒後にアニメーション開始
・下から上に0.5秒で表示させる

HTML

<p class="name">太郎<p>

css

.name {
    opacity:0;
    animation-name:anime;
    animation-duration:0.5s; 
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
   }
   @keyframes anime ​{
    ​0% {
     ​opacity: 0;
     ​transform: translateY(30px);
    ​}
      ​100%{
        ​opacity: 1;
         ​transform: translateY(0);
     ​} 
    ​}

解説

css

name {
   ​opacity:0; #要素の不透明度を設定.0は透明
   ​animation-name:anime;  #@keyframesと同じ名前の必要あり
   ​animation-duration: 0.5s; #アニメーション周期が完了するまでの所要時間を設定します。0.5だと素早くで画面に表示されます。5sだと５秒かけてゆっくり表示されます。
   ​animation-delay: 1ｓ; #アニメーションが起動するまでの時間。5sにすると画面更新5秒後にアニメーションが開始する。
   ​animation-iteration-count: 1; #アニメーションが再生される回数を指定します。
   ​animation-fill-mode: forwards; #アニメーション再生中・再生後のスタイルを指定します。こちらは、再生後、最後のキーフレーム（100%）のスタイルが適用される。
  ​}
  ​@keyframes anime {   #@animation-nameと同じ名前の必要あり、今回は「anime」
    ​0% {              
     ​opacity: 0;
     ​transform: translateY(30px); #0%なので、アニメーション始まった際に、transform: translateY(30px);の場所にアイテムが配置される
    ​}
      ​100%{
        ​opacity: 1;
         ​transform: translateY(0); #100%なので、アニメーション終わった際に、transform: translateY(０0x);の場所にアイテムが配置される
     ​} 
    ​}