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

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

[CSS] animationを使ってみる!

公開日: : CSS, Web制作 ,


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

色の変化をCSSのみで実装できる!

CSS3のキーフレームアニメーションでは、JSで出来る、背景色が徐々に変わるようなことができちゃいます。
また、要素を動かす事もできます。
設定内容がややこしいので、しっかり覚えましょう。

まずは基本のanimationから!

animationプロパティの設定で、基本的な事を決めていきます。

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state

animationプロパティでは、上記の順番で記述する事が推奨されています。
もちろん、省略可能ですが、一番最初のanimation-nameだけは必須項目です。
これがないとキーフレームの情報を受け取れません。

記述例

div#bg_anima {
  animation: anima01 10s ease 3s infinite forwards;
}

このような感じですね。
分けがわからなくなる人は、一つずつ順番に書いていってもいいかもしれません。

各プロパティを一つずつ見ていきましょう。

animation-name

このプロパティは、要素にキーフレームを適用する場合に指定する必要があります。
@keyframeで定義した名前と一致しないと何もおきません。

animation-duration

このプロパティは、一回のアニメーションの長さを指定します。
例えば、10秒であれば、10sです。0を指定すると何も実行されません。

animation-timing-function

このプロパティは、要素にアニメーションを適用する際に、アニメーションのタイミングや進行割合を指定します。
プロパティの値には、キーワードもしくは3次ベジェ関数で指定することができます。

easecubic-bezier—————(0.25, 0.1, 0.25, 1.0) を指定したのと同じ(開始と完了を滑らかにする)(初期値)
linearcubic-bezier————–(0.0, 0.0, 1.0, 1.0) を指定したのと同じ(一定)
ease-incubic-bezier————(0.42, 0, 1.0, 1.0) を指定したのと同じ(ゆっくり始まる)
ease-outcubic-bezier———-(0, 0, 0.58, 1.0) を指定したのと同じ(ゆっくり終わる)
ease-in-outcubic-bezier——-(0.42, 0, 0.58, 1.0) を指定したのと同じ(ゆっくり始まってゆっくり終わる)
cubic-bezier———————-(数値, 数値, 数値, 数値)3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定

上記6つの指定方法がありますが、上5つはあらかじめ設定されているので、キーワードだけでいいのです。
それぞれ試してみて、どうしても動きに納得がいかない場合、一番したのcubic-bezierを使用します。

animation-delay

このプロパティは、アニメーションの開始のタイミングを指定します。
初期値は0で、読み込み後すぐに実行されます。

設定する値は、durationと同様に10sとか5sとか秒数を指定します。

animation-iteration-count

このプロパティは、アニメーションの繰り返し回数を指定します。
初期値は1で、一回再生されると止まります。
また、数値ではなくinfiniteを指定すると無限ループで再生されます。

animation-direction

このプロパティは、アニメーションを交互に反転再生させるかどうかを指定します。
値は、normalとreverseとalternateがあり、reverseは、逆再生されます。
alternateは、普通に再生されたあと反転再生され、また普通に再生されるというように交互に反転します。

もうひとつ、reverse-alternateもあり、alternateの逆です。

animation-play-state

このプロパティは、アニメーションの一時停止を指定します。
が、多分使いどころがないですね。

animation-fill-mode

このプロパティは、アニメーションの再生前後の状態を指定します。

normal—————(初期値)
forwards————再生後、アニメーションの最後に適用されたキーフレームを保持
backwards———-再生前、アニメーションの最初のキーフレームを保持
both——————-forwards と backwards の両方を適用

とりあえず、やってみよう!

まずは、キーフレームを設定します。

@-webkit-keyframes move {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}
@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}

※moveの部分は任意の文字列で。

webkit系ブラウザ用にベンダープレフィックスを設定します。

そして、animationを設定していきます。

.sample01 {
  -webkit-animation: move 0.5s ease;
  animation: move 0.5s ease ;
}
.sample02 {
  -webkit-animation: move 1s ease;
  animation: move 1s ease;
}
.sample03 {
  -webkit-animation: move 1.5s ease;
  animation: move 1.5s ease;
}
.sample04 {
 -webkit-animation: move 2s ease ;
  animation: move 2s ease;
}

今回は、左から右に動く文字を作ってみました。
設定項目が少ないです・・・。

サンプルは、こちら

まとめ

現在は、まだまだ使えることは少ないと思いますが、これからどんどん増えていくでしょう。
そんな時に、わからないままだと、取り残されてしまいます。

早めにマスターして、どんな状況でも使えるようになりたいですね!

ad

関連記事

[jQuery] クリックしたところから波紋が広がるプラグイン!

Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]

ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重

記事を読む

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

まだまだあるぞ!Google Maps javaScript API v3 さて、2回にわたって紹

記事を読む

[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!

柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ

記事を読む

[jQuery] OSX風のスクロールバーにするプラグイン!

trackpad-scroll-emulator trackpad-scroll-emulator

記事を読む

[Dreamweaver] サイトタイトルを入力する枠を広げる!

デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ

記事を読む

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

CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア

記事を読む

[WordPress] 管理画面にテーブル(WP_List_Table)を表示する

WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを

記事を読む

[Dreamweaver] テンプレート機能を使う!初級〜中級編

まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。

記事を読む

[CSS] 角丸は便利だけど理解に苦しむ時もある

一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。

記事を読む

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アプリの開発もしております。

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
PAGE TOP ↑

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