ウェブ

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

scrdown

手軽なアニメーションとして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: 対象プロパティ 変化の継続時間 遅れて始まる時間 アニメーション効果;
}

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

プロパティ内容
transition-property設定することで、プロパティに動きがつくようになります。複数個設定が可能で”all”を設定すると、全てのプロパティに動きがつきます。
transition-duration「動き」の継続時間を設定します。開始から終わりまで何秒かけるかを秒単位(s)かミリ秒単位(ms)で指定します。
transition-timing-function動きの速度の変化を設定できます。初期値は”ease”で以外は”linear”(一定速度の変化)、”ease-in”(最初ゆっくり、後にはやく変化)、”ease-out”(最初は速く、後にゆっくり変化)などがあります。
transition-delay設定することで遅れて動きが始まります。動きが始まるまでの時間を設定します。これも秒単位(s)かミリ秒単位(ms)で指定します。
プロパティ

animationと@keyframesについて

animationtransitionを連続して行う動作に使用します。

@keyframesabout-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値は下記になります⇩

内容
ease開始時と終了時にはゆっくり変化。
ease-in開始時はゆっくり変化し、終了時は早く変化。
ease-out開始時に早く、終了時にゆっくり変化。
ease-in-outeaseよりゆっくり変化。
linear速度が変わることなく一定に変化。
cubic-bezier変化の度合いをベジェ曲線により任意で指定。
(x軸の値・ y軸の値・ x軸の値・ y軸の値)
animation値

無限scrdownの実装

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

内容
translate
(X方向の距離, Y方向の距離)
X方向とY方向の距離で2D移動を指定します。 Y方向の距離は省略することができY方向の距離は0となります。
translateX
(X方向の距離)
X方向の距離で移動を指定します。
translateY
(Y方向の距離)
Y方向の距離で移動を指定します。
translateZ
(Z方向の距離)
Z方向の距離で移動を指定します。 translateZ()関数にはパーセンテージ値を指定することができません。
translate()値

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

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA