文字がゆっくりと浮かび上がってくるcss

作成例

以下コード

app/assets/任意のcss


p
{
 animation-name: textanime;/*keyname*/
 animation-duration:10s;/*最大再生時間*/
 animation-fill-mode: forwards;/*表示を固定*/
 #追加したい色や余白があれば以下から}までの中に追加
}

@keyframes textanime
{
 0%{
  opacity: 0;/* 最初は透明 */
 }

 100%{
  opacity: 1;/* 最後は完全に表示 */
 }
}

pは各々対応させたいタグに変更して使用してください。