CSS3 アニメーション効果

マウスオーバーで透過させる場合。

.site-title a {
	display: block;
	background-image: url(images/site-title.png);
	background-repeat: no-repeat;
	height: 40px;
	width: 200px;
	text-indent: -9999px;
	transition: .2s linear;
	-webkit-transition: .2s linear;
	-moz-transition: .2s linear;
	-o-transition: .2s linear;
	-ms-transition: .2s linear;
}
.site-title a:hover { opacity: 0.5; }

8~12行目でフェードにかかる時間を指定します。

  • .2s…2秒間かけてフェードします。
  • linear…一定のスピードでフェードします、プロパティは下記の通りです。
    • default
    • linear
    • ease-in
    • ease-out
    • ease-in-out
    • cubic-bezier

14行目で:hover時の最終透過値を指定します。

:hover時の指定がCSSスプライトなど背景位置変更であれば:hover時の指定位置までスライドアニメーションします。
background-imageはアニメーションに対応していませんが、:hover用の画像をulの背景等に指定し、opacityを0にすることで完全透過させフェード切替えしているように表示させる事が可能です。

.pagetop {
	text-align: right;
	padding-top: 20px;
	padding-bottom: 20px;
}
.pagetop img {
	cursor: pointer;
	transition: .2s linear;
	-webkit-transition: .2s linear;
	-moz-transition: .2s linear;
	-o-transition: .2s linear;
	-ms-transition: .2s linear;
	margin-top: 5px;
	margin-bottom: 5px;
}
.pagetop img:hover {
	margin-top: 0px;
	margin-bottom: 10px;
}

13、14行目のmarginを17、18行目の:hoverで上下5pxずつ調整。
.page-top imgをマウスオーバーするとちょこっと上に動き、カーソルを外すと戻ります。