CSS 背景画像をマスクして左右に動かす

縦長の四角形の中に横長の画像を入れ、左右にアニメーションさせるサンプルです。

横幅を狭いエリアに、横長の画像を配置すると全体に小さくするしかありません。

そんな時、サイズは大きなまま画像の全体を表示するために、アニメーションをつけてみたのが、今回のサンプルです。

横幅を固定し、内部の背景画像の位置を左右に移動しています。


.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;
    }
}