[CSS] CSS3のtransitionを使ってみよう!

公開日: : CSS, Web制作 ,

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

関連記事

[CSS]印刷用CSSの設定方法

印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま

記事を読む

[jQuery] クリック時に波紋のような効果をつける

今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple

記事を読む

[CSS] メディアクエリ(Media Queries)を考える

Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を

記事を読む

[jQuery]背景画像にぼかしを入れるプラグイン

Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画

記事を読む

[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する

カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_

記事を読む

[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint

FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの

記事を読む

[CSS] ベンダープレフィックスはどこまで必要か?

各ブラウザが独自に先行実装しているCSS3 CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使

記事を読む

[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)

いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に

記事を読む

[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ

CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C

記事を読む

[CSS] CSSで作るリストのアイコン

CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑