%E3%81%AB%E3%82%93%E3%81%AB%E3%81%8F %E4%BF%9D%E5%AD%98%E5%AE%B9%E5%99%A8 100%E5%9D%87

画像を徐々に表示する CSS を使ったアニメーションの紹介です。「左から徐々に表示」「右から徐々に表示」「真ん中から円形に広がる」「複数の異なるアニメーション」など。また、JavaScript を併用する「スクロールアニメーション」もあります。 “ CSS：CSS3の「transform:scale()」でhoverした時に画像を拡大する ” への5件のコメント池田浩 2014年11月24日 4:29 PM より: 自分のホームページの画像をマウスオーバーで拡大しようとしてここを見つけたのですが、すいません、使い方が全くわかりません。あなたを優しく、包みたい。茂った木の葉の間から漏れてさす日の光のように・・・チョヌン、茂吉イムニダ。前回はvelocity.jsのオプション機能についてご紹介しました。velocity.jsは普段からjQueryに触れている方にとっては理解しやすく、アニメーションの滑らかさや実行速度の軽上記のcssの例では、ズームアップアニメーションの秒数は10秒となっています。（ zoomUp 10s の部分）この10秒というのは割と適当なんですが、Swiperでのスライダーの切り替えまでの時間と、フェードの時間を合わせた秒数よりも長くなるようにだけ注意してください。リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいという時に使えそうなエフェクトのサンプルです。いずれもcssのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 CSSでhover(ホバー)のアニメーションを作成したい。hover(ホバー)時にアニメーションするボタンを作成したい。サムネイルの画像をhover(ホバー)させた時にアニメーションさせたい。そんな方へ向けた内容です。コピペサンプルとデモを確認できますので、確認してぜひ使ってもらえたらと思います。当サイトのトップページの全面イメージ画像はゆっくりズームイン・ズームアウト（拡大縮小）を繰り返しながらスライドさせているのですが、JavaScriptやjQueryで大きさを変えるのではなく、CSS3のtransform:scale()使用しています。その方法を解説します。