マウスオーバーで透過させる場合
.fade {
transition: all .2s ease-out;
}
.fade:hover {
opacity: .5;
}
2行目が透明化の記述、5行目が透明度の記述です。
- .2s…0.2秒間かけてフェードします。
- ease-out…変化の仕方を指定できます、プロパティは下記の通りです。
- ease：開始時と終了時に緩やかに変化します。
- linear：一定の速度で変化します。
- ease-in：開始時は緩やかに変化、終了時は早く変化します。
- ease-out：開始時は早く変化、終了時は緩やかに変化します。
- ease-in-out：easeより緩急の差が大きくなります。
- cubic-bezier：それぞれの変化を数値で指定できます。
:hover時の指定がCSSスプライトなど背景位置変更であれば:hover時の指定位置までスライドアニメーションします。
background-imageはアニメーションに対応していませんが、:hover用の画像をulの背景等に指定し、opacityを0にすることで完全透過させフェード切替えしているように表示させる事が可能です。
マウスオーバーで動かす場合
.pagetop img {
cursor: pointer;
transition: .2s ease-out;
margin-top: 5px;
margin-bottom: 5px;
}
.pagetop img:hover {
margin-top: 0px;
margin-bottom: 10px;
}
4行目と5行目のmarginを8行目と9行目の:hoverで上下5pxずつ調整。
.pagetop imgをマウスオーバーすると少し上に動き、カーソルを外すと戻ります。
マウスオーバーでborderのアニメーション
.box {
position: relative;
}
.box:after {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 0;
transition: all .5s ease-out;
border-bottom: 3px solid #eee;
}
.box:hover:after {
width: 100%;
}
.boxの要素にマウスオーバーするとborder-bottomが伸び、マウスカーソルを外すと縮小します。
8行目で追加した空の要素を伸縮させて擬似的に.boxのborder-bottomを伸縮させているように表示しています。
マウスオーバーで回転のアニメーション
HTMLは対象となる要素<p>を囲う要素<div>が必要です。
<div class="box"> <p>link</p> </div>
CSSは囲いの要素の大きさの指定が必要です。
.box {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
.box p {
transition: all .5s ease-out;
transform: rotateZ( 0deg );
}
.box:hover p {
transform: rotateZ( 30deg );
}
対象を囲っている要素の大きさ（今回だと縦横50px）に合わせて回転の軸が決まります。
勿論テキスト部分は画像でも可能です。
9行目で元の位置（0度）の指定を、12行目でマウスオーバー時の位置（30度）の指定を記述します。
マウスオーバーで拡大のアニメーション
HTML側の記述です。
<a> <figure> <img> </figure> </a>
CSS側の記述です。
img {
transition-duration: .5s;
vertical-align: top;
}
img:hover {
transform: scale(1.1, 1.1);
transition-duration: .5s;
}
figure {
overflow: hidden;
}
3行目はリンクタグ内のイメージ要素の下に空白ができるのを防ぐためです。
6行目は幅と高さのマウスオーバー時のそれぞれの倍率です。
10行目で拡大した画像の範囲外の部分を非表示にします、この記述を書かなければ画像はそのまま大きくなります。
コメント