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

スポンサーリンク

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

スポンサーリンク

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

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

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;
  }
}

@keyframes

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

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

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

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

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; //前後の状態を保持するか?

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

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%);
	}
}

こちらもどうぞ

参考にしたサイト

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