CSS3 transition, transformを使用時に画像がぼやける

22301 Views
2017年07月26日 CSS3

最近では主流のCSS3を使うと簡単にアニメーションなどが作れます。

今回はcss3でリンク付きの画像にマウスホバーした際に画像がぼやける現象が発生したので、解決策になります。

SNSでシェア♪

1 現象が起きた内容
2 問題が起きた理由
3 解決策
4 文字までボケる

現象が起きた内容

以下の条件のときに、画像がぼやける問題が発生しました。

CSS

a,
img,
input,
svg,
*:before,
*:after {
	transition: all 0.5s;
}
a:hover img,
a:hover input,
a.hover:hover,
.btn a:hover,
.btn input:hover {
	text-decoration: none;
	opacity: 0.8;
}

img,

input,

svg,

*:before,

*:after {

transition: all 0.5s;

}

a:hover img,

a:hover input,

a.hover:hover,

.btn a:hover,

.btn input:hover {

text-decoration: none;

opacity: 0.8;

}

HTML

<ul>
    <li><a href="https://futaego.com"><img src="/asset/images/logo01.png" alt="ふたえごブログ"></a></li>
</ul>

<ul>

</ul>

問題が起きた理由

実際の問題がこのサイトで起きたわけではないですが、問題が起きたサイトのおそらくの理由はRetina対応による大きい画像を使用していたことだと思います。

スマホのことも考え2倍以上のサイズの画像を使用していたのでよりわかりやすくボケていたのかも、、、？

解決策

上記のCSSをこのように変更しました。

a,
img,
input,
svg,
*:before,
*:after {
	transition: all 0.5s;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
a:hover img,
a:hover input,
a.hover:hover,
.btn a:hover,
.btn input:hover {
	text-decoration: none;
	opacity: 0.8;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

img,

input,

svg,

*:before,

*:after {

transition: all 0.5s;

backface-visibility: hidden;

-webkit-backface-visibility: hidden;

}

a:hover img,

a:hover input,

a.hover:hover,

.btn a:hover,

.btn input:hover {

text-decoration: none;

opacity: 0.8;

backface-visibility: hidden;

-webkit-backface-visibility: hidden;

}

以上で解決です！

文字までボケる

別のサイトを作ってる時に文字まで化ける現象に遭遇しました。

そんな時は

a {
	-webkit-font-smoothing: antialiased
}

a {

-webkit-font-smoothing: antialiased

}

「-webkit-font-smoothing: antialiased；」
のコードも足してあげるといいでしょう！