タイトル見出しにアニメーションをつけてみた 【CSS animation】

タイトル見出しを大きく表示するようにしたので、アニメーションで表示するようにしてみました。

1. 基本的なアニメーション部分の構造をみる

見出し全体のフェードインと、上下の線の伸びるエフェクトの２つが組み合わせています。

CSSの中でフェードインの部分だけを抜き出してみます。

/* 見出しをフェードイン */

h1.entry-title {
  animation: title-fade-in 0.5s ease 0.8s 1 normal running forwards;
}

@keyframes title-fade-in {
  0% {
    color: #fff;
    border: solid 2px #FFF;
  }
  100% {
    border: solid 2px #a08010;
    color: #000;
  }
}

1-1. @keyframes

「@keyframes title-fade-in」というのが、アニメーションを定義しています。

title-fade-in というのは勝手につけた名前で、自由に名前をつけることができます。

0%, 100%など、それぞれの段階でどんなスタイルを適用するかを記述します。

ここでは、開始時（0%）に輪郭線・文字を白にして、終了時に色ありに指定しています。

1-2. animation

「animation: 〜」という箇所が、HTML要素に対してアニメーション・スタイルを指定します。

animation: title-fade-in 0.5s ease 0.8s 1 normal running both;

それぞれの数値や文字列には意味があります。

  animation-name: title-fade-in; //アニメーション名
  animation-duration: 0.5s; //持続時間
  animation-timing-function: ease; //アニメーションのイージング
  animation-delay: 0.8s; //遅延時間
  animation-iteration-count: 1; //繰り返し回数
  animation-direction: normal; //アニメーション方向
  animation-play-state: running; //すぐに再生するか？
  animation-fill-mode: both; //前後の状態を保持するか？

持続時間・遅延時間以外のキーワードは、各プロパティのキーワードに重複がないのでどの順番でも解釈されます。

2. CSSコード全体

コード後半では、横に伸びる線を表現するために、:after, :beforeに要素を追加して、細長い長方形として幅（width）をアニメーションしています。

/** 見出しをすっきり */
.article h1.entry-title {
	margin: 30px 20px;
	padding: 20px;
	text-align: center;
	padding-top: 70px;
	padding-bottom: 70px;
    font-size: 180%;	
    position: relative;	
}

/* 見出しをフェードイン */
.article h1.entry-title {
	border: solid 2px #fff;
	color: #fff;	
}

h1.entry-title {
    animation: 0.5s ease 0.8s 1 normal  running animation forwards;	
}

@keyframes animation {
    0% {
    border: solid 2px #FFF;
	}
    100% {
    border: solid 2px #a08010;
	color: #000;

	}
}

/* 見出しの上下の線が伸びる */
h1.entry-title:before, h1.entry-title:after {
  content: '';
  position: absolute;
  width: 0px;
  height: 2px;
  background-color: #a08010;
}

h1.entry-title:after {
  top:-2px;
  left:0px;
}
h1.entry-title:before {
  bottom:-2px;
  right:0px;
}


h1.entry-title:before, h1.entry-title:after {
    animation: 0.5s ease 0.5s 1 normal  running animation2 forwards;		
}
 

@keyframes animation2 {
    0% {
    width: 0;
	}
    100% {
    width: calc(100%);
	}
}

こちらもどうぞ

見出しに吹き出しをつけるスタイルをやめた

見出しに吹き出しつけるCSSを入れていたんですが、やめることにしました。こんな見た目でした/** 見出しに吹き出しをつける */@media screen { #container h2 { position: relative; padding: 0.6em 1em !IMPORTANT; } #container h2:not(.entry-card-title):not(.related-entry-heading):after { position: absolute...

chiilabo.com

[CSS] 目次のデザインをすっきりさせた

style.cssに目次のデザインを追加しました。こんなふうに変更しました。違いがわかりますか？スタイルを変更したのは主に３箇所目次のアイコンを追加した見出し3のフォントサイズを小さくした余白を狭くした/*目次のデザイン*/.article .toc { border-color: #a08010 ; padding: 10px; width: 95%;}.article .toc-title { text-align: left;}.article .toc-title::...

chiilabo.com

参考にしたサイト

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

saruwakakun.com

CSSアニメーション 入門 - Qiita

はじめにCSSアニメーションに関して説明する機会があったため、それらに関してまとめました。「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、CSSアニ…

qiita.com

QRコードを読み込むと、関連記事を確認できます。