css3のアニメーション追加assingment to {}

Question

@keyframeで追加割り当てを行う方法を探しています。 たとえば、バックグラウンド位置の変更を無限にしたいだけでいいです。

.waterwave{ 
 
    background-image: url("../img/waterwave.png"); 
 
    height: 215px; 
 
    margin-top: -78px; 
 
    width: 100%; 
 
    animation-name: example; 
 
    animation-duration: 100s; 
 
    animation-timing-function: ease-in-out; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: normal; 
 
} 
 
@keyframes example { 
 
    
 
    to {background-position: 100px;} 
 
}

しかし、私は100pxにのような絶対値を作成する必要はありません。 jsアニメーションでbackgroundPosition： "+ = 100"のようなものが必要です。 CSSのようなsthを行う可能性はありますか？

ありがとうございました

Answer 1

繰り返しの背景がある場合、背景は背景のグラフィックの幅からやり直します。たとえば、グラフィックの幅が300ピクセルの場合、background-position:50pxは正確にはbackground-position:350pxと同じに見えます。
これはあなたが使用できるものです：背景のアニメーションをグラフィックと同じ幅で正確に移動すると、シームレスに開始されます。少なくとも、あなたは使いやすさではなく線形関数を使用しています。

.waterwave { 
 
    background-image: url("http://lorempixel.com/300/215"); /* a 300px wide image */ 
 
    height: 215px; 
 
    margin-top: -78px; 
 
    width: 100%; 
 
    animation-name: example; 
 
    animation-duration: 5s; 
 
    animation-timing-function: linear; /* changed from ease-in-out */ 
 
    animation-iteration-count: infinite; 
 
    animation-direction: normal; 
 
} 
 
@keyframes example { 
 
    to { 
 
    background-position: 300px;  /* this should be the same as the image */ 
 
    } 
 
}

<div class="waterwave"></div>

（例では、私は効果が見えるように、期間中に5秒を使用していますが、アイデアを得る。）