個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル

よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル

初心者のためのCSS3 transition(トランジション)とtransform(トランスフォーム)のチュートリアルです。
海外の有名ブログから、わかりやすいチュートリアルを選んで翻訳してみました(結構、意訳したり、説明を付け足しています)。
CSS3 transitionとtransformを使ったサイトは、かなり頻繁に見かけます。
なめらかで楽しいその動きに、思わず手を止めて見てしまう人も多いのではないでしょうか。
そんなCSS3 transitionとtransformを実装できると、本人としても楽しくなってきますよね。
今回のチュートリアルでは、CSS3 transitionとtransformの基本的なところから、ご説明したいと思います。
実際に制作するサンプルは、以下のようなシンプルなものです。

See the Pen vNZrwQ by yugusato (@yugusato) on CodePen.


CSS3 transitionとtransformのご参考になれば幸いです。

transitionはカーソルを重ねるなどの動作で、始点と終点のアニメーションを変化させるプロパティ

transitionプロパティというのは、たとえば、要素にカーソルを重ねたときに、リンクのデザインをアニメーションさせることのできるプロパティです。
たとえば、始点=a要素、終点はa:hoverで、それぞれにCSSでデザインを設定します。
以下のようなCSSがあったとします。
このままでは、要素をカーソルに合わせたときに、いきなり背景色が変化するだけです。

このコードにtransitionを加えると以下のようになります。
transitionにはベンダープリフィックスをつけます。
ベンダープリフィックスを一度に付けたい場合は、「Express Prefixr」が便利ですよ。

これで、カーソルを合わせたときに、ふわりとしたアニメーションで変化するようになります。

See the Pen XmgNOg by yugusato (@yugusato) on CodePen.

ここで使用している「transition: all 0.3s ease;」は複数のプロパティをまとめたもの(ショートハンド)です。
「all」はすべてのプロパティを対象に、「0.3s」は変化に要する時間、「ease」は変化のスピードです。
この変化のスピードには、linear(一定の速度で再生)、ease(最初と最後を滑らかに再生)、ease-in(最初をゆっくり再生)、ease-out(最後をゆっくり再生)、ease-in-out(最初と最後をゆっくり再生)、cubic-bezier(より細かく指定する場合に利用)などがあります。

transformはxy座標を利用する

transformプロパティもアニメーションのように動きますが、animationプロパティとは異なります。
animationプロパティがキーフレームを利用するのに対して、transformプロパティではxy座標を利用します。
具体的には以下のようなイメージです。

transformプロパティでは、要素がこのxy座標の原点(0,0)に配置され、移動(translate)、回転(rotate)、拡大縮小(scale)などの動きをつけることが可能になります。

水平に右へ移動させる

transitionとtransformを組み合わせて実装してみましょう。
最初は、要素が水平に右へ移動するデモです。
水平移動させるには、transform: translate(x,y);を利用します。
HTMLは以下のようになります。

以上の要素に対してCSSを設定します。
まずは中央付近に配置します。

この要素に対して、350px右に移動させることにします。
さらに、要素の背景にあたる#axisにカーソルが乗ったときに、移動がスタートするようにします。

これで右350pxに移動するようになりましたが、transitionの設定をしていないために突然、瞬間移動のようなります。
始点と終点の間をアニメーションさせるために、transitionプロパティを加えます。

「all」ですべてのプロパティを対象に、「2s」で変化に要する時間を2秒に、「ease-in-out」で最初と最後をゆっくり再生にしています。
デモは以下のようになります。

See the Pen vNZarB by yugusato (@yugusato) on CodePen.

水平に左へ移動させる

続いては、さきほどとはまったく逆の水平に左へと移動させてみましょう。
350px左へ移動させるので、-350px移動させることになります。
HTMLは以下のようにします。

CSSは、水平右方向とは逆に、transform: translateの値を-350pxに変えるだけです。

デモは以下のようになります。

See the Pen pjwKjX by yugusato (@yugusato) on CodePen.


もうイメージが掴めてしまいました?

垂直に上方向へ移動させる

今度は垂直方向に移動させます。
水平やX軸でしたので、垂直はY軸の値を設定することになります。
ただし、注意が必要なのはY軸の値です。
通常のXY軸では、上方向はプラス、下方向はマイナスだと思いますが、transformで利用するY軸は上方向がマイナス、下方向がプラスになります。
この点だけ注意しましょう。

まずはHTMLです。

続いてはCSS。
上方向に350px移動させたいので、transform: translateにマイナスの値を設定します。

デモは以下のようになります。

See the Pen yYXEJB by yugusato (@yugusato) on CodePen.

垂直に下方向へ移動させる

今度は垂直に下方向へ移動させます。
先ほどとY軸の値が、逆になるだけです。
下方向に移動するので値はプラスになります。

まずはHTMLです。

続いてはCSS。
下方向に350px移動させたいので、transform: translateにプラスの値を設定します。

デモでは以下のようになります。

See the Pen EVXRNg by yugusato (@yugusato) on CodePen.

対角線、右上方向へ移動させる

今度は対角線上に右上方向へ移動させてみましょう。
対角線の右上方向ですので、X=350px、Y=-350pxという値になります。
もう簡単ですね。
まずはHTMLです。

続いてはCSS。
対角線の右上方向に移動させたいので、transform: translateにX=350px、Y=-350pxを設定します。

デモでは以下のようになります。

See the Pen epRKrd by yugusato (@yugusato) on CodePen.

対角線、左下方向へ移動させる

今度は対角線上に左下方向へ移動させてみましょう。
もうおわかりと思いますが、念のためです。
対角線の左下方向ですので、X=-350px、Y=350pxという値になります。
まずはHTMLです。

続いてはCSS。
対角線の左下方向に移動させたいので、transform: translateにX=-350px、Y=350pxを設定します。

デモでは以下のようになります。

See the Pen avwKay by yugusato (@yugusato) on CodePen.

右回りに回転させる

続いては要素を回転させてみましょう。
最初は右回り(時計回り)です。
要素を回転させるには、transform: rotate(deg)を利用します。
degには回転の角度を記入します。
一回転させたいなら360degとなります。
ではHTMLから。

続いてCSS。今回は右まわりに一回転させたいので、transform: rotate(360deg);となります。

デモは以下のようになります。

See the Pen QjgxJw by yugusato (@yugusato) on CodePen.

左回りに回転させる

今度は左回りです。
左回りですから、さっきと逆ですね。
ではHTMLから。

続いてCSS。今回は左回りに一回転させたいので、transform: rotate(-360deg);となります。

デモは以下のようになります。

See the Pen XmgYoR by yugusato (@yugusato) on CodePen.

拡大させる

今度は要素を拡大させてみましょう。
拡大させるには、transform: scale(n)、もしくは、transform: scale(x,y)を利用します。
nには倍率を記入します。200%に拡大したい場合はtransform: scale(2)となります。
X軸、Y軸で拡大率を変えたい場合は、transform: scale(x,y)を利用します。
たとえば、横方向では200%拡大、縦方向では300%拡大したいといった場合には、transform: scale(2,3)と記述します。
ではHTMLから。

続いてCSS。200%拡大させたいので、transform: scale(2)とします。

デモは以下のようになります。

See the Pen gaRKEE by yugusato (@yugusato) on CodePen.

複合的な動きをつける(移動+回転+拡大)

最後は、これまでの動きを組み合わせた動きを実装してみます。
transformプロパティは複数のプロパティをもつことができるので、いろいろな動きを組み合わせることが可能です。
ここでは、対角線右上方向に移動しながら回転しつつ、200%拡大させてみましょう。
まずはHTMLです。

続いてCSSです。
対角線右上方向に移動しながら回転しつつ、200%拡大ですから、translate(350px,-350px) rotate(360deg) scale(2)となります。

デモは以下のようになります。

See the Pen vNZrwQ by yugusato (@yugusato) on CodePen.

複合的な動きでは、記述の順番に注意しましょう。
記述の順番が変わるだけで、動きがまったくことなってきます。
たとえば、先ほどのデモで、 translate(350px,-350px)とrotate(360deg)の順番を逆にしてみるとどうなるのでしょうか。
実際には以下のようになります。

See the Pen EVXpao by yugusato (@yugusato) on CodePen.


これはこれで面白い動きになりますが、意図した動きになっていませんね。
transformプロパティを利用する場合には、記述の順番に注意して実装してください。

こちらの記事はCSS3 transition And transform From Scratchをもとに作成しました。

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 5

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

背景画像をサッとつくれる便利ツール20選

背景画像をサッとつくれる便利ツールやサイトをご紹介します。 背景にちょっと手を加えるだけで、見た目

記事を読む

コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

画像や写真にマウスを重ねたときに、アニメーションのエフェクトがかかっていると、それだけで洗練された印

記事を読む

100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた

100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた!?

各方面で紹介されている太っ腹な無料ストレージサービス「Shared」を利用し始めたところ、えらい目に

記事を読む

コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表27

コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表25

海外サイトなどではよく目にするプライステーブル/価格表。 この価格表は、いうまでもなく、コンバージ

記事を読む

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider.com」

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider」

イメージスライダーは限られたスペースに多くの視覚的情報を盛り込めるので、ショップなどでは非常によく利

記事を読む

CSSの手入力が不要になる便利なCSSジェネレーター「ENJOY CSS」

CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」

CSS3になってから便利なジェネレーターが次々に登場していますが、今回ご紹介するジェネレーターはひと

記事を読む

レスポンシブWEBデザイン用ナビゲーション&メニューのベストパターン16

レスポンシブWEBデザインは当たり前の世の中になりました。 当たり前になるにつれて、レスポンシブW

記事を読む

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

html/cssでtableを組むのって、手間がかかりますよね。 そんなとき便利なのがジェネレータ

記事を読む

レスポンシブWEBデザインの確認に最適!スマホ・タブレットでの表示を一度に確認できる「Responsinator」

レスポンシブWEBデザインの確認に最適!スマホ・タブレットでの表示を一度に確認できる「Responsinator」

レスポンシブWEBデザインの確認に最適なツールをご紹介します。 このツールを使えば、スマホやタブレ

記事を読む

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

簡単にWEBサイトの背景画像が作れてしまう無料ジェネレーターのご紹介です。 つくれるのは、SVG形

記事を読む