THE HAM MEDIA BLOG

CSSアニメーションを実行するトリガーのまとめ5+1個

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
CSS
アニメーション
ANIMATION
トリガー

先日『CSS3のtransitionプロパティでアニメーションを試してみた』をエントリーしましたが、とりあえずは:hoverで動作するものばかりを試作していたのですが、:hover以外はどんなのがあるか?と思い、とりあえず調べてまとめてみた。

E:hover

まずは前回同様:hoverから。マウスを要素に乗せることで動作します。

.demo1 div{
	width:150px;
	height:100px;
	background-color:#0066cc;
	border:3px solid #ffffff;
	color:#ffffff;
	-webkit-border-radius: 5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	transition:1s;
}
/* :hoverで動作 */
.demo1 div:hover{
	margin-left:320px;
	background-color:#ffffff;
	border:3px solid #0066cc;
	color:#222222;
}

マウスをのせてね(:hoverで動作)

:hover

いまさらながら試作を作っていて、:hoverの試しにはなるけど、動きの確認にはなるけど…実際の製作では使わないよなぁと。もっと使うような例も今後は考えないと。

E:active

次は:acriveでの動作。リンクをクリックしている間などに動作するようになります。

.demo2 a{
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	transition:1s;
}
/* :activeで動作 */
.demo2 a:active{
	padding-left:20px;
	background-color:#ff1493;
	color:#ffffff;
}

クリックをポンって押しただけだとわかりませんが、リンクがクリックされている状態(アクティブな状態)の時はアニメーションします。iPhoneとかだとアクティブ状態って…

E:target

次は:target。ページ内リンクとかでの#hogeなどで指定が入った部分に摘要されます。

.demo3 #test3,.demo3 #test4{
	height:0;
	overflow:hidden;
}
.demo3 #test3{
	background-color: #0066cc;
}
.demo3 #test4{
	background-color: #ff1493;
}
.demo3 p a{
	display:inline-block;
	margin-right:10px;
	padding:5px 10px;
	border:3px solid #0066cc;
	-webkit-border-radius: 5px;
	-moz-border-radius:5px;
	border-radius: 5px;
}
/* :targetで動作 */
.demo3 #test3:target,.demo3 #test4:target{
	height:100px;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	transition:1s;
}

タブ1タブ2

タブ1の中身
タブ2の中身

タブとかで利用できるかなと。でもCSSだけだと、一旦そこにページ内リンクが飛んでしまうという問題があったり。

E:focus

次は:focus。inputなど、focusした際にアニメーションで変化します。

.demo4 input{
	padding:5px 10px;
	border:3px solid #ccc;
	font-size:133%;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	transition:1s;
}
/* :focusで動作 */
.demo4 input:focus{
	border:3px solid #0066cc;
	background-color:#222222;
	color:#ffffff;
}

inputでのアニメーションは、以前からyoutubeでも地味に使われていたりします。でも0.2sでの変化って…

E:checked

:checkedはチェックボックスやラジオボタンでチェックが入った際に適応されるCSSです。ただ、チェックボックスやラジオボタン部分に使えるCSS自体が少なかったりするので、CSSだけでの利用箇所はないかもしれない。

.demo5 input{
	outline:5px solid #0066cc;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	transition:1s;
}
/* :checkedで動作 */
.demo5 input:checked{
	outline:5px solid #ff1493;
}

outlineの変化だけ。個人的にはCSSだけでなく、JSでやりたいところ。

さて、ここまではCSSの擬似クラスがトリガーになるのと5つ紹介しました。微妙なのもありすみません。。。他にもあるかもしれないですが、とりあえずここまで。

最後にCSSではないですが、こんなのでもアニメーションした!というのをご紹介。

Add class (with jQuery)

予めCSSでclassを設定しておいて、jQueryなどでclassを追加すると、追加した要素がアニメーションして変化してくれます。

.demo6 div{
	background-color:#0066cc;
	width:150px;
	height:100px;
	color:#ffffff;
	border:3px solid #ffffff;
	-webkit-border-radius: 5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	transition:1s;
}
.demo6 div p{
	padding:22px 0 0 0;
	text-align:center;
}
/* class="active"で動作 */
.demo6 div.active{
	width:450px;
	background-color:#ff1493;
	color:#ffffff;
}

JSコード

$('.demo6 div').click(function(){
	$(this).toggleClass('active');
});

クリックした要素にactiveというclassがついて変化するデモです。今回は単純にtoggleClassでclassをつけたりとったりしてみます。

下のブロックをクリックしてね

Add class

Add class

Add class

jQueryと組み合わせることで、CSSのアニメーションもいろいろできることの幅が広がりそうです。

以上、CSSアニメーションを実行するトリガーのまとめ5+1個でした。

余談:これはアニメーションしなかった

ひとつこのエントリーを書いている際、E::selectionも試してみたのですが残念ながらE::selectionはアニメーションしてくれませんでした。選択してる部分のCSSですから、使えなくて当然っていったら当然なんですけどね…

この記事へのコメント
$(document).ready(function(){
});

Jqueryのやつですが、これ入れないと動かないみたいですよ。
Posted by test at 2011年11月25日
>testさん
jQueryについて、おそらく勉強中なのかと思いす。下記リンクと、そこに掲載しているリンク先なども是非目を通しておいてください。

http://h2ham.seesaa.net/article/141226477.html

$(document).ready(function(){});についてや、なぜそれが必要なのかなどが書いてあります。是非勉強の参考に!
Posted by ハム at 2011年11月25日
そもそも .ready とかを最初につけるのなんてJqueryしてる人にとっては
決まりごとだったり、おまじない的なものでほとんどつける決まりにみたいなものだから
態々サンプルコードに.readyとかのせる必要ないでしょ!!
コピペばっかりしてないで、自分でスクリプト書いてみたら?

勉強中であれば、尚更.readyとかの記述は最初にでてくるわけで
参考書でいったら Helloworldみたいなもんですから!

これ主じゃなくて Testさんへのレスですから。
Posted by 辛口一号 at 2012年01月03日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/183191643
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

今月のおすすめブログ記事
Excerpt: CSSアニメーションを実行するトリガーのまとめ5+1個 http://bit.ly/fyIcvY今月のイチオシブログ記事。 CSSでもアニメーション。ウェブデザイナーさんでもすんなり..
Weblog: ウェブ恵方巻 知ったかぶりの丸かぶり
Tracked: 2011-05-25 15:52

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。