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を記述*/
}

animation値は下記になります⇩

無限scrdownの実装

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

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