scrdownの実装方法-CSSでアニメーション「animation」と「transition」について【@keyframesの指定方法】

手軽なアニメーションとしてWeb上でマウスを乗せた場合の:hoverアニメーションをつける場合はCSSプロパティtransitionを使って変化させます。

そして、高度なアニメーションを実装したい場合はanimationプロパティと@keyframeを組み合わせてCSSアニメーションを作ります。

まずは基本的なtransitionについての解説をしてから、応用編としてanimationプロパティと@keyframeを組み合わせたCSSアニメーションについて詳しく解説します。

transitionについて

transition要素はスタイルが変化する速度を調整するプロパティです。transitionでは@keyframesの設定は必要なくtransitionで自然な動きが実現できます。

transitionプロパティはトリガーが必要

transitionプロパティは:hoverや:activeなど、要素が変化するためのトリガーが必要となります。元の要素にtransitionを付けることによって:hoverや:activeをきっかけにして機能することになります。

▪参考例⇩ Run Penをクリック。

See the Pen transitionとtransform使用例 by pull-design (@design90806871) on CodePen.

boxにマウスが乗った際にtransition: 1s;の記述で1秒かけてゆっくり変化させるという意味になります。

transform: scale(0.8);で縮小、transform: scale(1.1);で拡大が自然と動くのがわかります。

簡易的に記述しましたが、細かく設定する場合は下記のようになります。

.box {
	transition-property: 対象プロパティ;
	transition-duration: 変化の継続時間;
	transition-timing-function: アニメーション効果;
	transition-delay: 遅れて始まる時間;
}
/* ショートハンド */
.box {
	transition: 対象プロパティ 変化の継続時間 遅れて始まる時間 アニメーション効果;
}

プロパティは下記になります⇩

animationと@keyframesについて

animationはtransitionを連続して行う動作に使用します。

@keyframesにabout-colorの名前を付けて、同じ名前をanimationの先頭に付けて定義します。

▪参考例⇩ Run Penをクリック。

See the Pen animationと@keyframes by pull-design (@design90806871) on CodePen.

infiniteを指定すると無限にアニメーションをループさせることができます。

.box {
	/*8秒かけて"infinite"で無限にループさせる*/
	/*"about-color"という名前のアニメーションを定義*/
	animation: about-color 8s ease-in-out infinite;
}
@keyframes about-color {
	0% {background-color: #ff2828;} /*アニメーションを開始するときのCSSを記述*/
	100% {background-color: #9328ff;} /*アニメーションを終了するときのCSSを記述*/
}

コードは、CSSのアニメーションを使用して要素の背景色を変化させる効果を実現しています。以下にコードの意味を説明します。

このコードを実行すると、.box クラスが指定された要素の背景色がアニメーションによって変化します。アニメーションは8秒かけて開始の背景色から終了の背景色へと徐々に変化し、その後無限に繰り返されます。

animation値は下記になります⇩

無限scrdownの実装

transform:translate()・・・要素の表示位置を移動させるプロパティ。

See the Pen scrdown by pull-design (@design90806871) on CodePen.