問題 × 解決策

cssのみでアニメーションを行う方法

問題

cssのみでアニメーションを行うには?

解決策

css3の「animation」を使用して、「animation-name」を設定して「@keyframes」でアニメーションの詳細を記述することで実現することができます。

css3のanimationを使う

css3のanimationを使うことで、cssのみでアニメーションを行うことができます。
今回はcssのみでアニメーションを行う方法をご紹介します。

DEMOはこちら

アニメーションを表示

HTMLはこちら

要素「クラス:animate-box」を用意します。

<div class="animate-box">
	<div class="inner">
		<p class="text">アニメーションを表示</p>
	</div>
</div>

CSSはこちら

要素「クラス:animate-box」にcss3の「animation」を使用することで実現することができます。

  1. animation-name」を設定します。
  2. @keyframes」でアニメーションの詳細を設定します。
.animate-box{
	display: block;
	height: 100px;
	position: relative;
	background-color: #fef2ef;
}
.animate-box .inner{
	display: block;
	padding: 10px;
	color: #F15A24;
	background-color: #ffffff;
	border: 1px solid #F15A24;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	-webkit-animation-duration: 3s;
	-webkit-animation-name: animate;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	animation-duration: 3s;
	animation-name: animate;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
@-webkit-keyframes animate {
	0% {
		bottom: 0;
	}
	15% {
		bottom: 10px;
	}
	30% {
		bottom: 0;
	}
	45% {
		bottom: 10px;
	}
	60% {
		bottom: 0;
	}
	100% {
		bottom: 0;
	}
}
@keyframes animate {
	0% {
		bottom: 0;
	}
	15% {
		bottom: 10px;
	}
	30% {
		bottom: 0;
	}
	45% {
		bottom: 10px;
	}
	60% {
		bottom: 0;
	}
	100% {
		bottom: 0;
	}
}

ポイント!

  • animation-name」で設定した名前で「@keyframes 設定した名前 { … }」を設定することで、アニメーションを行うことができます。
  • animation-duration」で、アニメーションを行う時間を設定します。
    @keyframes」ではその時間を元に100%の換算で「0% { … } 50% { … } 100% { … }」という形式でアニメーションの設定を行います。
  • animation-iteration-count」で「infinite」を設定することで、アニメーションを繰り返し実行することができます。

参考ページ

以下のサイトが、より詳しく解説してくれています。

【【CSS3】@keyframes と animation 関連のまとめ – Qiita】
https://qiita.com/7968/items/1d999354e00db53bcbd8

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

5 × 1 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧