画像の枠は固定したまま、拡大率を変えたいです
解決したいこと
画像のサイズはそのままで、拡大率を変えたいです。
画像はスクロール時に固定したいため、疑似要素beforeにのせています。
JSX内
<Box className="topImage"
style={{
height: "100vh",
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
overflow: "hidden",
}} >
CSS内
.topImage::before {
background: url("○○") no-repeat center;
content: "";
position: fixed;
width: 100%;
height: 100vh;
margin: 0 auto 0;
animation: anime 1s ease-in-out;
animation-duration: 2.7s;
}
@keyframes anime{
0%{
width: 0%;
transform: scale(1.5);
}
100%
{
width: 100%;
transform: scale(1);
}
}
0 likes
