→replica+にもどる

CSS3でアニメさせるサンプル

オンマウスで光る(チカッと)

#sample01 ul li a{
	background		: #FFCC00;
}
#sample01 ul li a:hover{
	-webkit-animation-iteration-count	: 1;
	-webkit-animation-name				: 'wink01';
	-webkit-animation-duration			: 0.75s;
}
@-webkit-keyframes 'wink01'{
	0%,100%{
		opacity		: 1;
	}
	50%{
		opacity		: .5;
	}
}

オンマウスで光る(光りっぱなし)

#sample02 ul li a{
	background		: #66CCCC;
	color			: #fff;
}
#sample02 ul li a:hover{
	opacity		: .5; // 忘れると悲惨。
	-webkit-animation-iteration-count	: 1;
	-webkit-animation-name				: 'wink02';
	-webkit-animation-duration			: 0.75s;
}
@-webkit-keyframes 'wink02'{
	0%{
		opacity		: 1;
	}
	50%,100%{
		opacity		: .5;
	}
}

うまくいかない例

光りっぱなしみたいな時は、:hoverのところに記述する際にも、opacityの設定をしてあげないとちょっと残念なことになってしまいます。

#sample03 ul li a{
	background		: #66CCCC;
	color			: #fff;
}
#sample03 ul li a:hover{
//	opacity		: .5;
	-webkit-animation-iteration-count	: 1;
	-webkit-animation-name				: 'wink03';
	-webkit-animation-duration			: 0.75s;
}
@-webkit-keyframes 'wink03'{
	0%{
		opacity		: 1;
	}
	50%,100%{
		opacity		: .5;
	}
}