先日『CSS3のtransitionプロパティでアニメーションを試してみた』をエントリーしましたが、とりあえずは:hoverで動作するものばかりを試作していたのですが、:hover以外はどんなのがあるか?と思い、とりあえず調べてまとめてみた。E:hoverまずは前回同様:hoverから。マウスを要素に乗せることで動作します。#0066cc;color:#222222;}マウスをのせてね(:hoverで動作):hoverいまさらながら試作を作っていて、:hoverの試しにはなるけど、動きの確認にはなるけど...実際の製作では使わないよなぁと。使うような例も今後は考えないと。E:active次は:acriveでの動作。リンクをクリックしている間などに動作するようになります。a:active{padding-left:20px;background-color:#ff1493;color:#ffffff;}ダミーリンク(クリックを押しっぱなしにしてください)ダミーリンク(クリックを押しっぱなしにしてください)クリックをポンって押しただけだとわかりませんが、リンクがクリックされている状態(アクティブな状態)の時はアニメーションします。iPhoneとかだとアクティブ状態って...E:target次は:target。ページ内リンクとかでの#hogeなどで指定が入った部分に摘要されます。1s;transition:1s;}タブ1タブ2タブ1の中身タブ2の中身タブとかで利用できるかなと。CSSだけだと、一旦そこにページ内リンクが飛んでしまうという問題があったり。E:focus次は:focus。inputなど、focusした際にアニメーションで変化します。#0066cc;background-color:#222222;color:#ffffff;}inputでのアニメーションは、以前からyoutubeでも地味に使われていたりします。0.2sでの変化って...E:checked:checkedはチェックボックスやラジオボタンでチェックが入った際に適応されるCSSです。チェックボックスやラジオボタン部分に使えるCSS自体が少なかったりするので、CSSだけでの利用箇所はないかもしれない。#ff1493;}:checkedデモoutlineの変化だけ。個人的にはCSSだけでなく、JSでやりたいところ。ここまではCSSの擬似クラスがトリガーになるのと5つ紹介しました。微妙なのもありすみません。他にもあるかもしれないですが、とりあえずここまで。最後にCSSではないですが、こんなのでもアニメーションした!というのをご紹介。jQuery)予めCSSでclassを設定しておいて、jQueryなどでclassを追加すると、追加した要素がアニメーションして変化してくれます。div').click(function(){$(this).toggleClass('active');});クリックした要素にactiveというclassがついて変化するデモです。今回は単純にtoggleClassでclassをつけたりとったりしてみます。classjQueryと組み合わせることで、CSSのアニメーションもいろいろできることの幅が広がりそうです。以上、CSSアニメーションを実行するトリガーのまとめ5+1個でした。余談:これはアニメーションしなかったひとつこのエントリーを書いている際、E::selectionも試してみたのですが残念ながらE::selectionはアニメーションしてくれませんでした。TrackBack(1)この記事へのコメント$(document).ready(function(){});Jqueryのやつですが、これ入れないと動かないみたいですよ。2011年11月25日>testさんjQueryについて、おそらく勉強中なのかと思いす。下記リンクと、そこに掲載しているリンク先なども是非目を通しておいてください。http://h2ham.seesaa.net/article/141226477.html$(document).ready(function(){});についてや、なぜそれが必要なのかなどが書いてあります。Testさんへのレスですから。[必須入力]※画像の中の文字を半角で入力してください。http://bit.ly/fyIcvY今月のイチオシブログ記事。&amp;nbsp;CSSでもアニメーション。reserved.×この広告は180日以上新しい記事の投稿がないブログに表示されております。