対象にマウスが当たった時の挙動を変える #hover #transition

f:id:hrt0kmt:20140714132909p:plain

transition-propertyは、対象のプロパティ(要素)を指定できます(width,height,allなど)。

transition-durationは、アニメーションの動作がどのくらいのスピードで完了するか指定できます(3s:3秒掛かるなど)。

transition-timingは、アニメーションの動作をどうするか指定できます(最初はゆっくりease-in、後半ゆっくりease-out、開始と後半ゆっくりease-in-out。一定速度linear、全体的にゆっくりeaseなど)。

transition-delayは、どのくらい遅れて実行するかを指定できます(1s: 1秒後など)。

       {
            transition-property:all;
            transition-duration:3s;
            transition-timing-function:ease-in;
            transition-delay:1s;
            /* 右と等価 taransition:all 3s ease 1s; */
        }
        .a:hover {
            width: 200px;
            height: 200px;
        }

f:id:hrt0kmt:20140714194713p:plain

f:id:hrt0kmt:20140714194724p:plain

f:id:hrt0kmt:20140714194733p:plain



参照