cssのanimation設定ってどんな動きができるの?いい感じに設定するにはどうしたらいい?

CSS HTML
Update 2018.03.09

cssのanimationプロパティってどんな設定をするとどんな動きになるのか、意外とわかっていない人も多いのでは?

css animation効果とはtransitionと似ていますが@keyframesで細かい設定が可能なもので、突き詰めるとまさにアニメーションのようにアイテムを動かすことができるようになります。
とはいえ、webサイト制作やブログの運営などであれば本格的なアニメーションというよりは、いい感じの動きを付けてあのサイトよりかっこ良くしたいぐらいでいいと思います。
なので基本的にどんな設定をすればどんな動きになるかってのをご紹介します。

browser:  65 11 20 10 

transitionの設定

transitionは[:hover]などのきっかけとセットで使う
animationは@keyframesで細かい設定が可能(かつてFlashをいじったことのある方にはわかりやすかもしれません。)

例えば下記の場合、
[item_fadein]と名付けた0%(スタート)はopacity: 0;で100%(エンド)はopacity: 1;というアニメーションを1秒間でease(開始と完了を滑らかに)実行

animationで指定するプロパティ

animation-name:任意でつける名前
animation-duration:1回分の実行にかける時間
animation-timing-function:実行中の変更速度
animation-iteration-count:繰り返す数
animation-direction:繰り返す際の方向を指定
animation-play-state:実行、および停止を指定
animation-delay:実行やプロパティ変更の際の待ち時間
animation-fill-mode:実行後スタイルを元に戻さず、変化したままのスタイルを維持するか否か
+
@keyframes:animation-nameで指定したものに対して、各アニメーションの進行状況ごとに変化させるプロパティを指定。
*iOS8以下やAndroid4.4.4以下対応時の場合はベンダープレフィックスが必要


animation-name:任意でつける名前

上記サンプルでは[item_fadein]と指定
どのような動きのanimationを設定しているか(あとから見て)わかりやすいものであればなんでもいいです。
@keyframesで設定したものを実行するために必要な名前となります。


animation-duration:1回分の実行にかける時間

transitionはtransitionにかける時間
animationの場合は1回分の実行にかける時間


animation-timing-function:実行中の変更速度(transition-timing-functionプロパティと同じ)

*[:hover]で確認できます。
基本的な動きは、[background:#29b6f6;][width:100px;]のboxを[:hover]キッカケで1秒かけて[background:#f06292;][width:200px;]に変更します。
animation-timing-functionプロパティの値
ease:cubic-bezier(0.25, 0.1, 0.25, 1.0) と同様(開始と完了を滑らかにする)(初期値)
ease
transition: background 1s ease,width 1s ease;
linear:cubic-bezier(0.0, 0.0, 1.0, 1.0) と同様(一定)
linear
transition: background 1s linear,width 1s linear;
ease-in:cubic-bezier(0.42, 0, 1.0, 1.0) と同様(ゆっくり始まる)
ease-in
transition: background 1s ease-in,width 1s ease-in;
ease-out:cubic-bezier(0, 0, 0.58, 1.0) と同様(ゆっくり終わる)
ease-out
transition: background 1s ease-out,width 1s ease-out;
ease-in-out:cubic-bezier(0.42, 0, 0.58, 1.0) と同様(ゆっくり始まってゆっくり終わる)
ease-in-out
transition: background 1s ease-in-out,width 1s ease-in-out;
step-start:通常のhoverの動きおよびsteps(1, start)と同様(瞬時に始まって終わる)
step-start
transition: background 1s step-start,width 1s step-start;
step-end:steps(1, end)と同様(transition-durationの時間だけ待って実行)
step-end
transition: background 1s step-end,width 1s step-end;
steps(数値, start or end):ステップ数(数値)で等分に区切り実行。ステップ数は正の整数で指定
steps
transition: background 3s steps(3,end),width 3s steps(3,end);transition-duration:3s steps(3,end)で設定(3秒間で3ステップで変化)
transition-duration:3sで設定した時のステップタイミング
steps(3,start)の場合:0s,1s,2sのタイミングで変化
steps(3,end)の場合:1s,2s,3sのタイミングで変化
cubic-bezier(数値, 数値, 数値, 数値):3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
cubic-bezier
transition: background 1s cubic-bezier(.17,.89,.32,1.28),width 1s cubic-bezier(.17,.89,.32,1.28);
http://cubic-bezier.com/での編集が簡単です


animation-iteration-count:繰り返す数

・初期値は[1]
・無限は[infinite]を指定


animation-direction:繰り返す際の方向を指定

・初期値は[normal]
normal:標準の方向
normal
サンプルはanimation: cp_anime 3s ease infinite normal;で設定しています
reverse:逆順
reverse
サンプルはanimation: cp_anime 3s ease infinite reverse;で設定しています
alternate:animation-iteration-count(繰り返し回数)が奇数の場合は標準/偶数の場合は逆順
alternate
サンプルはanimation: cp_anime 3s ease infinite alternate;で設定しています
alternate-reverse:animation-iteration-count(繰り返し回数)が奇数の場合は逆順/偶数の場合は標準
alternate-reverse
サンプルはanimation: cp_anime 3s ease infinite alternate-reverse;で設定しています


animation-play-state:実行、および停止を指定

[:hover]などでanimationを停止するなどの指定ができます。
running:アニメーションを再生中にする(初期値)
paused:アニメーションを一時停止にする

*[:hover]すると停止します。
cp_item
こちらはhover値に:hover{animation-play-state: paused;}を設定。


animation-delay:animation実行の待ち時間を指定

指定した秒数だけ、animation実行を遅らせます。
transition-delay:1sであれば1秒間は実行されない。


animation-fill-mode:実行後スタイルを元に戻さず、変化したままのスタイルを維持するか否か

・初期値は[none]
・[forwards]:実行の最後のキーフレーム(100%)で設定されたスタイルを保持
ただし[animation-direction]と[animation-iteration-count]の値によって変わります。
animation-directionanimation-iteration-count最後のキーフレーム
normal偶数または奇数100% または to
reverse偶数または奇数0% または from
alternate偶数0% または from
alternate奇数100% または to
alternate-reverse偶数100% または to
alternate-reverse奇数0% または from

・[backwards]:実行の最初のキーフレーム(0%)で設定されたスタイルを保持
ただし[animation-direction]と[animation-iteration-count]の値によって変わります
animation-direction最初の適切なキーフレーム
normal または alternate0% または from
reverse または alternate-reverse100% または to

・[both]:実行開始前は開始直後の状態/実行終了後は終了直前の状態


animation(ショートハンド):上記8プロパティのショートハンド

animation:animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction
transitionと同じで基本的に順不同。ただしanimation-durationはanimation-delayより先に書く。
複数のアニメーションを指定するには、カンマで区切る。

ex)cp_animeというanimationを3秒かけて[ease]で動かす。無限に繰り返し方向は標準
animation: cp_anime 3s ease infinite normal;

ex)cp_anime1というanimationを3秒かけて[ease]で動かす。無限に繰り返し方向は逆順,cp_anime2というanimationを3秒かけて[ease]で動かす。無限に繰り返し方向は標準
animation: 'cp_anime1' 3s ease infinite reverse,'cp_anime2' 3s ease 1s infinite;

@keyframesの基本設定

書き方の基本はこちら
@keyframes 任意の名前 {
0% {CSSプロパティ:値;}
100% {CSSプロパティ:値;}
}

cssのtransitionを使ったパーツはこちら

copypet.jp

コピペでできる!CSSとhtmlだけのcss animationで作る矢印アクション5種 | copypet.jp|パーツで探す、web制作に使えるコピペサイト。

ランディングページやキャンペーンサイトなどでは全画面イメージからスクロールさせるような場合が多くあります。 下にスクロールさせたいけど矢印に気づいてもらえないなんてことになってはもともこもありませんね。 そこで使えるのが、スクロールを促すための矢印アクションです。 css animationを使った目立ちすぎず、でも気がつきやすい矢印をご用意しました。 @keyframesを少しずつ変更して自分だけのアニメーションを手に入れてください。…

copypet.jp

記事を見る

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?