[CSS] CSS3のtransitionを使ってみよう!
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
CSS3のTransitionは、そんなに難しくない!
CSS3では、CSSのマークアップだけでアニメーションやインタラクティブなことが出来るようになっています。
それらは、今まではjavascriptだったりFlashだったりが必要だったものです。
これから、その中の一つのプロパティであるTransitionについて説明していきます。
Transitionは、現在はベンダープレフィックスが必要なので若干ソースは多いですが、基本的な事は簡単です。
まずは基本の動きから!
Transitionを理解するにあたり、まずは基本をしっかりおさえておきましょう。
これから、簡単な例を紹介しますので、そこで基本を理解しましょう。
See the Pen ewnuy by Junya Sekimoto (@juny) on CodePen.8507
はい、基本的な動きを何個か用意しました。
transitionのポイントは、「transition:適用したいプロパティ,何秒で実行するか,タイミング(3次ベジェ曲線で設定するか、ease・linear・ease-in・ease-out・ease-in-outのどれか),実行するまでに何秒待つか」という順番で設定していきます。
若干、animationの設定と似ていますね。
まとめ
transition自体は、本当に難しくないので、是非どんどんトライしてもらいたいです。
jsを使わなくてもある程度の表現までは出来るようになるので、マスターしていて損はありません。
今回は簡単な例のみですが、もうちょっと突っ込んだ難しい表現を近々紹介したいと思います。
ad
関連記事
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ
CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C
-
[jQuery] FlickerPlateを紹介します。
かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い
-
[CSS] 複数のbackground-imageの設定方法
マルチBackground-imageを使ってみる CSS3では、背景画像を指定する際に複数の画像
-
[CSS]印刷用CSSの設定方法
印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま
-
[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン
rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ
-
[CSS] clearfixの使い方を考える
現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな
-
[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!
柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ
-
[jQuery] クリック時に波紋のような効果をつける
今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]
完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。