lottieを使ったアニメーションがスマホで見るとボヤける
解決したいこと
lottieを使ったアニメーションを制作しており
そのアニメーションをcssの transform:scaleやtransform-originを使って
様々な見せ方を模索しております。
その最中、scaleの拡大表示をした際
スマホ実機で閲覧するとボヤけたように見えてしまいます。
（pcのSafariでも同様のものが見えました）
svgアニメーションのため拡大しても問題はない認識でしたが
何故かボヤけたように見えてしまい
それの原因、改善策をご教授いただけますでしょうか。
pcでスマホサイズを閲覧時 （Chrome / モバイルビューシュミレーター）
スマホ実機で閲覧時 （iPhone15 / Chrome）
▼ html
<div class="anime">
<div id="animation"></div>
</div>
▼ CSS
#animation {
width: 100vw;
height: 100vh;
overflow: hidden;
}
#animation svg {
opacity: 0;
}
.active #animation svg {
animation: key-anime 9s cubic-bezier(1, 0.04, 0.43, 0.97);
opacity: 1;
}
@keyframes key-anime {
0% {
transform: scale(7);
transform-origin: 40% 10%;
}
50% {
transform: scale(7);
}
100% {
transform: scale(1);
transform-origin: 50% 0%;
}
}
▼ js
//svg animation 設定
var animation = lottie.loadAnimation({
container: document.getElementById("animation"),
renderer: "svg",
loop: true,
autoplay: true,
path: "./assets/json/animation.json",
rendererSettings: {
preserveAspectRatio: 'xMidYMid meet'
}
});
自分で試したこと
下記がネットで調べて出た解決方法で
片っ端から使ってみたのですがダメでした。。。
.anime,
#animation,
#animation svg {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
will-change: opacity;
}
0
