この記事では、こちらの「CSSでアニメーション」の@keyframesについて解説する記事です。

目次

@keyframes

こちらで解説している@keyframesのコードを改めて紹介すると下記です。

CSS


@keyframes huwa {
	0% {
		-webkit-transform: translateY(10px);
		-ms-transform: translateY(10px);
		transform: translateY(10px);
		opacity: 0;
 	}
	100% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}
.single-wrap .title {
	animation: huwa 1s;
}

一見長いコードでわけわからないかもしれませんが、これを言葉で表すと

  • @keyframesに「huwa」という名前をつけます
  • @keyframes huwaの0%（最初）には〇〇を指定します
  • @keyframes huwaの100%（最後）には△△を指定します
  • .single-wrapの.titleにanimationのhuwaを1秒で再生します

みたいな感じです。

@keyframesは２つ書き方がある

特に重要視することではないかもしれませんが、一応知識として入れておきましょう。

％で指定する

まず１つ目、今回紹介した『％』。

CSS


@keyframes huwa {
	0% {
		〇〇
 	}
	100% {
		△△
	}
}

この〇〇や△△に好きなCSSを書けば、0％から徐々に100%に近くにあたって、変化していきます。

ちなみに「0％と100％」だけではなく、50％や30％などの好きな数字を当てはめてアニメーションすることもできますよ。

from toで指定する

もう１つの指定の仕方は『from to』。

CSS


@keyframes huwa {
	from {
		〇〇
 	}
	to {
		△△
	}
}

『from=0％・to=100%』です。

なので、特にこだわりがなければ、％指定でOK。

@keyframesのその他疑問点

1.名前は「huwa」以外でもいいの？

なんでもいいです。

これがbuwaでもaaaでもOK。ですが、後からコードを見返した時に自分がわかりやすい名前にしておくことをおすすめします。

2.animationについて

今回でいうと、.single-wrap .titleにanimationを書いていますよね。

このanimationの書き方は、実は色々あります。

始まりから終わるまでの時間を指定したり、変化の度合いを調整したりと様々な用途で使うことができます。

とはいえ、使いすぎるとサイトが重くなりますので、ほどほどがちょうどいいです。

ちなみに、animationについてはこちらの記事「【CSS3】@keyframes と animation 関連のまとめ」がわかりやすいので、合わせて読んでみてください。

『CSSでアニメーション』に戻る
ポートフォリオサイトへ
あわせて読みたい記事
『いつかは仕事を辞めたい』なら今すぐやっておくべきたった1つのこと
あなたに向いてる仕事がすぐにわかるたった1つの方法
SHARE