TOP > ウェブ > 【初心者向け】CSSだけでアニメーションを作れる

【初心者向け】CSSだけでアニメーションを作れる ウェブ

【初心者向け】CSSだけでアニメーションを作れる

フロントエンドデザイナー JK

2018/11/22

0

LineLine

初めてhtml/cssを学ぶときに、セッティングの基本だけを勉強していました。marginやpaddingを使って、ブロックのものをあっちこっちに表示させていました。

アニメーションは全然できませんでした。よくJavascriptを使っています。

しかし、後でcssでも簡単なアニメーションを作れることを知りました。

 

:hover擬似クラス、:active擬似クラス

その一つ方法は、:hover擬似クラスと:active擬似クラスのセットを使うことです。

  • :hover擬似クラスはカーソルなどが対象に乗った際にスタイルを指定します。
  • :active擬似クラスは対象をクリックした際にスタイルを指定します。

この二つを使えば、いろんな簡単なアニメーションができます。

その中に、個人的には役立つアニメーションを紹介したいと思います。

 

ボタンのカスタマイズ

ボタンは良きサイトにとって不可欠なものです。

少しカスタマイズだけで、サイトのイメージが変わられます。

そこで、ちょっといじったら、

 

こういう風になりました。

box-shadowを使って、ボタンの影部分を作ります。

前の0 5px 0 #a43300にボタンの立体化を作り、後ろの0 10px 0 rgba(0,0,0,0.2)にボタンの影を作ります。

border: 0;のは、本来ボタン周りの枠線を消します。

さらに、border-radiusを加えることで、ボタンを丸っぽく見えます。。

 

次に:hover擬似クラスと:active擬似クラスを使って、アニメーションを加えます。

 

マウスを乗せることで、ボタンが半分に沈んでいます。

クリックしたら、ボタン全体が沈みます。

自分の想像で様々なアニメーションを考えて、ボタンに組み込むことがとても楽しいことです。

 

色やサイズなどの変化

マウスを移動するときに、たまにどこの色が変わったり、

 

たまにどこのブロックが大きくなったり、縮んだり、

 

または、どっちもなります。

 

これは色やサイズ以外でも使えます。

 

ブロックを動かせる

アニメーションといえば、動くことです。

そこで、transitionとtransformの登場です。

transitionプロパティはtransition(時間的変化)効果(transition-property、 transition-duration、 transition-timing-function、 transition-delay )をまとめて指定することができます。

  • transition-property:transition効果を適用するCSSプロパティ名を指定します。
  • transition-duration:変化に掛かる時間を指定します。
  • transition-timing-function:変化のタイミング・進行割合を指定します。
  • transition-delay:変化がいつ始まるかを指定します。

transitionプロパティを指定する値の順番は、transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値です。

それぞれプロパティの初期値は、transition-propertyはnone、 transition-durationは0、 transition-timing-functionはease、 transition-delayは0です。

まとめて、こうなります。

 

transformプロパティは、要素に2D変形、または、3D変形を適用することができます。

transformプロパティの値に、用意されているtransform関数を指定することで、 要素にいろんな変形を適用することができます。

指定できるtransform関数は、行列を使用した2D変形 と 行列を使用した3D変形、移動、縮尺、回転、傾斜、遠近効果です。

  • 行列を使用した2D変形 と 行列を使用した3D変形
    • matrix(数値, 数値, 数値, 数値, 数値, 数値)
    • matrix3d(数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値)
  • 移動
    • translate(X方向の移動距離, Y方向の移動距離)
    • translateX(X方向の移動距離)
    • translateY(Y方向の移動距離)
    • translateZ(Z方向の移動距離)
    • translate3d(X方向の移動距離, Y方向の移動距離, Z方向の移動距離)
  • 縮尺
    • scale(X方向の縮尺比率, Y方向の縮尺比率)
    • scaleX(X方向の縮尺比率)
    • scaleY(Y方向の縮尺比率)
    • scaleZ(Z方向の縮尺比率)
    • scale3d(X方向の縮尺比率, Y方向の縮尺比率, Z方向の縮尺比率)
  • 回転
    • rotate(回転角度)
    • rotate3d(数値, 数値, 数値, 回転角度)
    • rotateX(X軸を軸とする回転角度)
    • rotateY(Y軸を軸とする回転角度)
    • rotateZ(Z軸を軸とする回転角度)
  • 傾斜
    • skew(X軸の傾斜角度, Y軸の傾斜角度)
    • skewX(X軸の傾斜角度)
    • skewY(Y軸の傾斜角度)
  • 遠近効果
    • perspective(数値)

まず、transformプロパティの行列を使用した2D変形を見てみましょう。

 

 

matrix(数値, 数値, 数値, 数値, 数値, 数値)の六つ数値はそれぞれに水平方向の縮尺、垂直方向の傾斜率、水平方向の傾斜率、垂直方向の縮尺、水平方向の移動距離、垂直方向の移動距離を対応しています。

 

移動の場合:

 

translate(X方向の移動距離, Y方向の移動距離):横縦2D移動のことです。

translate(0px, 0px)は、初期位置です。X方向の移動距離を調整することで、左右移動、Y方向の移動距離を調整することで、上下移動が可能です。

 

縮尺の場合:

 

scale(数値, 数値)の二つ数値はX方向とY方向の比率です。

 

回転の場合:

rotate3d(数値, 数値, 数値, 回転角度)は、 3つの数値で[X,Y,Z]の方向ベクトルを決め、最後に指定する回転角度で時計回りの3D回転を指定することができます。

 

傾斜の場合:

 

skew(X軸の傾斜角度, Y軸の傾斜角度)は、2つの角度によってX軸とY軸に沿った傾斜変形を指定することができます。

 

animationと@keyframes

animationの使い方

animationプロパティは、要素にキーフレームアニメーションを適用する場合に、 アニメーションについてまとめて指定することができます。

animationプロパティで指定できる値(プロパティ)は以下のとおり。

  • animation-name:アニメーションの名前。初期値:none。
  • animation-duration:アニメーションの開始から終わるまでの時間(1回分)。初期値:0。
  • animation-timing-function:アニメーションの進捗時の効果。初期値:ease。
  • animation-delay:アニメーションが開始するまでの時間。初期値:0。
  • animation-iteration-count:アニメーションの繰り返し回数。初期値:1。
  • animation-direction:アニメーションを逆再生(順番)。初期値:normal。
  • animation-fill-mode:アニメーションの開始前と終了後の状態。初期値:none。
  • animation-play-state:アニメーションの再生と停止。初期値:running。

以上8つのプロパティの値を組み合わせて指定することができます。 省略された値はそれらの初期の値に設定されます。

 

animation-name

アニメーションの名前を指定します。@keyframesルールでキーフレームを定義さらた名前です。

 

@keyframesの後ろに続くのが、animation-nameで指定した値になります。

 

animation-duration

アニメーション一回分の時間の長さを指定することができます。

 

1秒の場合:

 

 

3秒の場合:

 

 

animation-timing-function

アニメーションの進行スピードを調整することができます。

プロパティの値には以下のがあります。

  • ease:開始と完了を滑らかにする。
  • linear:一定。
  • ease-in:ゆっくり始まる。
  • ease-out:ゆっくり終わる。
  • ease-in-out:ゆっくり始まってゆっくり終わる。
  • cubic-bezier:3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定。

各値の違い

ease、linear、ease-in、ease-out、ease-in-outの違いを見てみましょう。

 

ease

 

linear

 

ease-in

 

ease-out

 

ease-in-out

 

 

animation-delay

アニメーションの開始を遅らせる時間を指定することができます。

 

1sの場合:

 

*マウスホバー

 

3sの場合:

 

*マウスホバー

 

animation-iteration-count

アニメーションの再生の回数を指定することができます。値には、数値とinfiniteを指定します。

 

数値の場合:

 

 

infiniteの場合:

 

 

animation-direction

アニメーションを交互に反転再生させるかどうかを指定することができます。

  • normal:普通の方向で再生します。
  • alternate:往復の形で繰り返します。

 

normalの場合:

 

 

alternateの場合:

 

 

animation-fill-mode

アニメーションの終了時に、元の状態に戻るか否かをしていすることができます。

  • forwards:アニメーションの終了時に、もとの状態に戻らない。
  • backwards:アニメーションの終了時に、もとの状態に戻る。

 

forwardsの場合:

 

*マウスホバー

 

backwardsの場合:

 

*マウスホバー

 

animation-play-state

アニメーションの再生と停止をコントールすることができます。

  • running:アニメーションが再生されます。
  • paused:アニメーションが停止します。
 

*マウスホバー

 

@keyframesの使い方

アニメーションの途中の変化を指定することができます。

@keyframesの指定の仕方は、アニメーション開始から終了までの間にいつどのふうに指定することです。

 

開始と終了だけの場合;

 

アニメーションの開始時はform、終了時はtoで指定します。

 

いくつの中継点で区切る

中継点は%で指定します。

 

*マウスホバー

 

最後

最後に、アニメーションを参考できるサイトを紹介します。

紹介するサイトはアニメーションだけではなく、デザインも参考できます。

 

The Art Center

いろんなアニメーションを使っています。デザインも素敵なサイトです。

 

Pittori di Cinema

絵や本などをメインとしてサイトを作るなら、このサイトに参考が多いです。

 

Qvartz

シンプルの上に、気分を悪くならない配置、簡単に作りたいサイトとしておススメです。

 

My Home, My Starbucks

アニメーションを最低限に抑えています。少ないアニメーションでサイトを飾ります。

 

Jveb Studio

署名サイン風のローディングアニメーションを使っているサイトです。

 

終わり

cssでアニメーションを作る方法を紹介しました。

 

制作の道は一本だけではないです。いろんな方法で試すと、面白いものを見つかるかもしれません。

フロントエンドデザイナー JK

中国人のフロントエンドデザイナー(エンジニア)。日本のゲーム・アニメに深い愛を持つ。

0

LineLine

この記事のURLをコピー

コメントを投稿する

コメント0件

人気の記事