April 16

css3でアニメーション・フェード効果

「CSS3でアニメーション」が面白いのでやってみました
もう一つマウスオーバーでフェードをかけられるのがいい感じです

ただ、今のところSafari3.1でしか見られないのが残念ですが
firefoxだと画像が切り替わるのみでフェードがかかりません

demoはこちらで

Safari3.1はココでダウンロード出来ます(Windowsもok)
cssのみでこんなフェード効果が出るとは驚きです!

ソースは以下に

)まるの移動

まるは普通に「まる」と打って「○」に変換させてます

css

.circle{
width: 280px;
margin: 1em auto;
font-size:70px;
color:#999;
-webkit-transition: all 1s ease-in-out;
}

.slideright:hover {
-webkit-transform: translate(3em,1em); }

html

<div class="circle slideright">○</div>


)フェード効果のマウスオーバー

css

div.fader {
margin: 1em auto;
width: 200px;
}
div.fader img { -webkit-transition: all 1s ease-in-out; }
img.swap1, div.fader:hover img.swap2 { opacity: 1.0; }
div.fader:hover img.swap1, img.swap2 { opacity: 0; }

html

<div class="fader">
<img class="swap1" style="position: absolute;" src="baby01.jpg" width="200" height="150" alt="">
<img class="swap2" src="baby02.jpg" width="200" height="150" alt="">
</div>



関連記事   Safari3.1の新しい機能が見られるサイト

参考サイト 「The Art of Web~CSS:Animation Using CSS Transforms
      「The Art of Web~CSS: Transition Timing Functions


posted by nei at 03:30 | HTML&CSS
Retweet!
×

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