文字を徐々に表示するアニメーションをCSSでコピペで使えるHTML+CSS

文字を徐々に表示するアニメーション。トップページなどで大きな文字とともに用いると効果的です。

INDEX

文字を徐々に表示 (透明度の操作)
文字を徐々に表示し、文字を移動させる
関連するCSS

文字を徐々に表示 (透明度の操作)

これからの未来へ向けて新しいご提案

スタイルシートで記述

<span class="animation1" style="font-size: 36px;">これからの未来へ向けて新しいご提案</span>

@keyframes open-keyanime1{  /* アニメーションの動き */
  0% { 
    opacity:0; /* 完全に透明 */
 } 
  100% {
    opacity:1; /* 透明度無し、通常表示 */
  }
}

.animation1{
  animation-name: open-keyanime1 ; 
  animation-duration: 5s; /* 5秒間で表示 */ 
  animation-fill-mode: both;  
  animation-iteration-count: 10; /* 10回実行させています */
}

必ず透過度で指定してください。壁紙の色から調整する方法は後に壁紙を変更することになる場合に対応できません。

文字を徐々に表示し、文字を移動させる

これからの未来へ向けて新しいご提案

スタイルシートで記述

<span class="animation2" style="font-size: 36px;">これからの未来へ向けて新しいご提案</span>

@keyframes open-keyanime2{ 
  0% { 
    margin-left:150px;
    opacity:0; 
  } 
  100% {
    margin-left:0px;
    opacity:1; 
  }
}
.animation2{
  animation-name: open-keyanime2 ; 
  animation-duration: 5s; /* 3秒間動く */ 
  animation-fill-mode: both; 
  animation-iteration-count: 10; /* 10回実行させています */
}

margin-leftの値を操作することで右から移動してきたようなアニメーションを実現する。周囲のレイアウトに影響を与えたくない場合は、position: absoluteとして、leftの値を操作してもよい。