横幅を狭いエリアに、横長の画像を配置すると全体に小さくするしかありません。
そんな時、サイズは大きなまま画像の全体を表示するために、アニメーションをつけてみたのが、今回のサンプルです。
横幅を固定し、内部の背景画像の位置を左右に移動しています。
.demo_img{
background-image: url(https://www.kipure.com/img/demo/cat/003.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: auto 300px;
width: 300px;
height: 400px;
animation: act_anime 10s infinite alternate linear;
}
@keyframes act_anime {
0% {
background-position: -150px 0px;
}
100% {
background-position: 0px 0px;
}
}
