WebデザイナーのためのCSS3実践講座

要素の変形アニメーション

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「transform」を使って、要素を変形アニメーションさせる方法について、解説致します。
講師:
08:05

字幕

このレッスンでは transform という CSS プロパーティーを使って― 要素を変形アニメーションさせる 方法について解説していきます まずはダウンロードしてきたこちらの transform ― というフォルダの中に入っているこちらの index.html ファイルと こちらの― style.css ファイルを エディタで開いて下さい そして これがそれらのファイルを 開いた状態となっています そして この右側には こちらの index.html ファイルを― ブラウザで表示させた状態となっています これらのファイルを使って今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずはこちらの index.html ファイルの方から見てみます こちらのファイルには 合計で五つの div タグを用意しています そして その div タグには transitionA や― transitionB といったような id をそれぞれ振っています そして その div タグの中には A B C D E といった形で― テキストを置いています それら div タグに該当するのが こちらのブラウザで表示されている― こちらの A B C D E といった形になります この div タグには背景画像として 写真を設定しています 今回はこれら五つのブロックに対して 変形アニメーションを CSS で― 実装していってみたいと思います それでは こちらの style.css ファイルの方をエディタで開いてみましょう まず 注目して頂きたい部分が こちらの部分ですね こちらの部分では transition プロパーティーを使って― アニメーションの設定を行っています 左から 0.5s そして ease 0s となっていますね この値は左から順にアニメーション時間 そして アニメーションの緩急の種類― そして アニメーション開始タイミングを 指定しています そして 次に注目して頂きたい部分が こちらの部分ですね これは要素に対して アニメーションの中心点を― 指定するものとなっていて― transform-origin というプロパーティーを使います そして 50% 50% と書いていますね このように設定することで アニメーションをさせるブロックの― 中心点を設定することができます 今回はそのブロックの 真ん中という意味になります それでは こちらのファイルの 下の方を見ていきます すると こちらの部分でそれぞれの div タグに対してアニメーションを― 実装しているのが分かるかと思います それでは 順番に解説していきます まずはこちらの transitionA から― こちらには回転アニメーションを行う 実装を施しています まず div#transitionA と書いて hover と書いていますね こうすることでマウスカーソルが その要素の上に載った時に― こちらの中の内容が実行される といった形になります そして こちらの中ですが transform ― という CSS プロパーティーを 使っています そして 今回はその後に rotate ( ) (括弧) と書いていますね そして その中に 200deg と書いています rotate は回転を表す意味ですね そして この括弧の中は 回転させる角度を表しています ここでは 200 度回転させる という意味になります それでは この状態でこちらのブラウザの方の A のブロックにマウスを載せて見ましょう すると このように回転しましたね そして マウスカーソルを このブロックから外すと― このように元の状態に戻ります こういった形で回転アニメーションを 実装することができます それでは 次に transitionB の方を― 見てみましょう こちらの transitionB では 位置アニメーションを設定しています 同じように transform プロパーティーを書いて 値として今度は― translate と書いて ( ) (括弧) その中に 50px と 200px と記載しています こちらの括弧の一番目の値は横方向の移動距離 そして二番目の値は縦方向の移動距離― となります それでは この状態でブラウザで transitionB を― 確認してみましょう こちらの B の枠の中に マウスカーソルを載せると― このようにブロックが移動しましたね そして このブロックからマウスを離すと このように元の状態に戻ります これが位置アニメーションです それでは 次に transitionC を見てみます transitionC は こちらの部分ですね こちらの部分では 拡大縮小アニメーションを 設定しています 同じように transform と書いて その後の値に scale と書きます そして ( ) (括弧) と書いて その中に 1.2 1.2 と書いています こちらの 一番目の値の 1.2 というのは アニメーションさせる要素の― 横幅の拡大縮小比率を表しています そして 二番目のこちらの 1.2 という値は同じく― アニメーションさせる要素の縦幅の 拡大縮小比率となっています ですので 今回は 1.2 倍 縦にも横にも 大きくする といった形になりますね それでは この状態で transitionC の動きを― 確認してみたいと思います マウスカーソルを載せると このように大きくなりましたね そして マウスカーソルを外すと このように小さくなりました― 続いて transitionD の方を 見てみます それが こちらの部分となります transitionD では 傾斜アニメーションの設定を行っています 同じように transform と書いて その後に skew と書きます そして その括弧の中に 10deg そして 10deg と書いていますね こちらの最初の 10deg は X 軸に おける傾斜角度を表しています 要するに 10 度となります 同じくこちらの後ろの 10deg に関しては― Y 軸での傾斜角度 同じく 10 度 傾けるといった形になります それでは transitionD の動きを 確認してみます それでは こちらの D のブロックに マウスカーソルを載せてみます すると このようにブロックが 傾斜した感じになりましたね そして マウスカーソルを外すと このように元の状態に戻ります 最後に transitionE の ところを確認してみます それがこちらの部分となりますね こちらの部分では 複数のアニメーションを 組み合わせた状態としています 同じように transform と書いて まずは rotate (20deg) ― と書きます そして 半角スペースを空けて scale (1.5, 1.5) ― と書いています こちらセミコロン (;) が二つ 繋がっているので 一つ不要ですね 消しておきましょう このように半角スペースを空けて 複数のアニメーションを設定する事が可能です それでは こちらの transitionE の動きを― 確認してみます こちらのボックスの中に マウスカーソルを置きます すると このように― まずはブロックが回転して 且つ 大きさが変わりましたね そして マウスカーソルを離すと こういった感じに元に戻ります このように transform プロパーティーを利用すれば― 高度な変形アニメーションを 実装する事が可能です 是非 活用していきましょう 以上でレッスンは終了です 今回は transform を使って 要素を変形アニメーションさせる方法について― 解説致しました 以降のレッスンでは CSS3 を使って 簡単なロゴマークを作成する方法について― 解説していきますので そちらも合わせてご覧下さい

WebデザイナーのためのCSS3実践講座

このコースでは、実際にWebデザインを行うときに頻繁に利用するCSS3の新機能と使い方を解説します。具体的にはWebフォント機能やFont Awesomeを使ったアイコンの表現方法、マルチカラムレイアウトや丸角ボックスの作成方法、アニメーションができるトランジション機能やトランスフォーム機能について紹介します。

2時間15分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月09日
再生時間:2時間15分 (29 ビデオ)

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。