css3 animation addition assignment for to{} - css

Question

I am looking for way to make addition assignment in #keyframe.
for example I want background position change infinity and just go on.
.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;}
}
But I don't want to make absolute value like 100px .
I want something like backgroundPosition: "+=100" in js animation.
Is there any possibility to doing sth like that in css ?

Answer 1

If you have a repeating background, the position starts over at the width of the background graphic. For example, if the graphic is 300px wide, then background-position:50px looks exactly the same as background-position:350px.
So that's what you can use: move the background animation precisely the same width as the graphic, and then it will seamlessly start over. At least if you use the linear function rather than ease-in-out.
.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>
(in the example I used 5 seconds for the duration, to make the effect visible, but you get the idea.)