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

スポンサーリンク
LINEで送る
Pocket

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

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

これからの未来へ向けて新しいご提案
スタイルシートで記述
<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の値を操作してもよい。

関連するCSS

@keyframes規則 アニメーション コピペで使えるHTML+CSS
@keyframes規則 アニメーションの実現CSS @keyframes 目的 htmlについてアニメーションを実現します...
CSSのみでクリックによりボックスが開くアニメーション コピペで使えるHTML+CSS
JavaScriptを用いず、CSSのみでアコーディオンアニメーションdivボックスを実現します。ページを読み込んだ際に開いた状態とならないよう、ラジオボタンとチェックボックスの2つをフラグとして利用します。CSSのみで実現できる限界点の一つ。
LINEで送る
Pocket

タイトルとURLをコピーしました