デモページはこちら

マウスオーバー時にCSSのtransitionプロパティを実装する場合の注意点です。以下のhtml構造でテストします。

<div class="container">
	<div class="box">
		<p class="title">a:hover imgにtransitionを設定</p>
		<div class="photo01"><a href="#"><img src="images/photo01.jpg" alt=""></a></div>
	</div>
	<div class="box">
		<p class="title">imgにtransitionを設定</p>
		<div class="photo02"><a href="#"><img src="images/photo01.jpg" alt=""></a></div>
	</div>
</div>
<p class="title">svg:hoverにtransitionを設定</p>
<svg id="c-btn-arrow01" xmlns="http://www.w3.org/2000/svg" width="131px" height="28px" viewBox="0 0 131 28">
	<path class="c-btn-arrow-parts" fill-rule="evenodd" d="M130.795,25.540 L108.375,0.537 L107.934,2.580 L128.796,26.006 L0.795,26.006 L0.795,28.007 L130.795,28.007 L130.795,25.540 Z"/>
</svg>
<p class="title">svgにtransitionを設定</p>
<svg id="c-btn-arrow02" xmlns="http://www.w3.org/2000/svg" width="131px" height="28px" viewBox="0 0 131 28">
	<path class="c-btn-arrow-parts" fill-rule="evenodd" d="M130.795,25.540 L108.375,0.537 L107.934,2.580 L128.796,26.006 L0.795,26.006 L0.795,28.007 L130.795,28.007 L130.795,25.540 Z"/>
</svg>

.photo01 a:hover imgや#c-btn-arrow01:hoverのように、transitionをhover側の要素に設定してしまうと、マウスアウト時にtransitionが動作しません。.photo02 imgや#c-btn-arrow02のように、hover前の要素に設定すると正しく動作します。

.photo01 a:hover img {
	opacity: 0.6;
	transition: opacity 0.3s;
}
.photo02 img {
	transition: opacity 0.3s;
}
.photo02 a:hover img {
	opacity: 0.6;
}
#c-btn-arrow01:hover {
	transform: translateX(20%);
	transition: transform 0.3s;
}
#c-btn-arrow02 {
	transition: transform 0.3s;
}
#c-btn-arrow02:hover {
	transform: translateX(20%);
}
.c-btn-arrow-parts {
	fill: #fff;
}