css3のアニメーションを活用してみよう

css3のアニメーションを活用してみよう

近頃いろんなところで『css3を使ったすごい手の込んだアニメーション』を見かけます。
これは負けてられないぞ、ということで今回はアニメーションプロパティについてざっくり説明していきます。

CSS3にはアニメーションに関するプロパティが大きく分けて二つあります。

・ transitionプロパティ
・ animationプロパティ

transition

ループできない

自動再生できない

hover・click時に再生される。

See the Pen blog3 by hiddemon (@hiddemon) on CodePen.

transition: 0.2 all; と書かれたセレクタがhoverなどでスタイル変更される場合、その変化に0.2秒の時間をかける。といった意味で

そのほかにも変化が始まる時間や、変化の進行割合を指定することができます。

animation

ループできる

自動再生できる

keyframesで、動きを指定できる

See the Pen blog2 by hiddemon (@hiddemon) on CodePen.

@keyframesは「移行」という意味で、アニメーションの動きを%で指定することができます。

 

上記二つのプロパティはあくまで動きを指定するものなのでpaddingやopacityといったプロパティの値を変更することで初めてアニメーションが機能します。

CSS3で登場したtransformプロパティを使えば、移動、縮尺、回転、傾斜、遠近効果などの様々な設定を行えます。いわばエフェクターのようなものですね。

 

 


Previous: Photoshopを使ったWebサイト ラフデータの作り方 ~カンバス編~ Next: AMPでカルーセルを実装する

© 2017 ALL CONNECT Inc. All Rights Reserved.