変化前と、変化後の状態を決めて、両方を DIV に対してクラスとして適用します。この場合、set_image と set_image:hover がそれに当たりますが、set_image をクラスとして適用すれば両方が有効です。
さらに、肝心のアニメーションの定義も適用すれば、マウスカーソルが DIV の上に来た時にアニメーションが実行されます。
transition: all 1.3s ease-out 0s;
all : set_image:hover で定義された全ての属性に対してアニメーションを行います
※ 個別に指定すると、それだけがアニメーションとなり、それ以外はアニメーションせずに切り替わります。
1.3s : 変化に要する時間
ease-out : 変化の仕方です。
0s : 変化する前の待ち時間( この場合はすぐ開始 )
少し前は、ブラウザ毎の指定が必要でしたが、現在 IE11、IE10、Chrome、Firefox で動作しています。
-webkit-transition: all 1.3s ease-out 0s;
-moz-transition: all 1.3s ease-out 0s;
-o-transition: all 1.3s ease-out 0s;
<style type="text/css">
/**************************************/
/* 最初の状態 */
/**************************************/
.set_image {
width: 526px;
height: 526px;
background: no-repeat url(https://lh4.googleusercontent.com/-Hy0zxyLJ1l8/T-H1qhd4AxI/AAAAAAAAG30/KGtB2FknDAE/s640/H_2016a.png);
background-color: #000000;
}
/**************************************/
/* マウスカーソルが上に乗った時の状態 */
/**************************************/
.set_image:hover {
width: 300px;
height: 300px;
background-position: -90px 0px;
background-color: #4DBDB5;
}
/**************************************/
/* 変化の定義 */
/**************************************/
.box_transition {
transition: all 1.3s ease-out 0s;
}
</style>
<div class="box_transition set_image"></div>
参考
http://css3please.com/
posted by
at 2014-08-01 13:15
|
CSS
|
|
