THE HAM MEDIA BLOG

先日『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の試しにはなるけど、動きの確認にはなるけど…実際の製作では使わないよなぁと。もっと使うような例も今後は考えないと。

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;
}

タブとかで利用できるかなと。でも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の擬似クラスがトリガーになるのと５つ紹介しました。微妙なのもありすみません。。。他にもあるかもしれないですが、とりあえずここまで。

最後に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をつけたりとったりしてみます。

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

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

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

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