CODEWITHSUNDEEP
javascripthtmlcss
Priya Sunanthan
Priya Sunanthan

Reputation: 439

How to do continuous translate effect using css3

CSS:

.horizon {
    position:absolute;
    top:380px;
    width: 1800px;
    height: 50px;
    background: url(images/road.png) repeat-x;
    -webkit-animation-name: prop-600;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes prop-600 {
    0% {
        -webkit-transform: translateX(0px);
    }
    100% {
        -webkit-transform: translateX(-1000px);
    }
}

This is working correctly, but after 100% it is stoping and again the translation is starting. I dont want to stop the translation at 100%. I want the image to keep on going from left to right without any stoping.

Here is the fiddle:http://jsfiddle.net/rVAtz/

In the fiddle instead of image i just gave the square element

I am ok with using javascript or jquery to achieve this effect.

Can anyone help me. Thanks in advance

Upvotes: 3

Views: 7038

Answers (3)

Novelist
Novelist

Reputation: 479

Here's without transforms. Remove all transform/transition properties and use this:

var startTime = +(new Date()),
    horizon = document.getElementsByClassName('horizon')[0];
(function update(){
    var dif = (new Date()).getTime() - startTime;
    dif *= 0.05;
    horizon.style.left = (100 - dif)+'px';
    requestAnimFrame( update, horizon );
})();

I use requestAnimationFrame, you can use setTimeout. fiddle: http://jsfiddle.net/rVAtz/10/

Upvotes: 1

Novelist
Novelist

Reputation: 479

There is special property for this but I forget it. So, also you can just build your animation like:

0% {
  -webkit-transform: translateX(0px);
}
50% {
  -webkit-transform: translateX(-1000px);
}
100% {
  -webkit-transform: translateX(0px);
}

UPD: Here's it! -webkit-animation-direction: alternate;

fiddles: http://jsfiddle.net/rVAtz/4/ and first way http://jsfiddle.net/rVAtz/5/

another UPD: So, okay. Set this css to the square:

-webkit-transition: -webkit-transform 1s linear; /* Or 20s as in your code */
-webkit-transform: translateX(100px);

And use this jQ code:

var position = 100;
(function animateSquare(){
  position -= 100;
  $('.horizon')
  .css('transform','translateX('+position+'px)')
  .one('webkitTransitionEnd',animateSquare);
})();

fiddle: http://jsfiddle.net/rVAtz/6/

here's without any libraries (pure JS):

var position = 100,
    horizon = document.getElementsByClassName('horizon')[0],
    binded = false;
(function animateSquare(){
  position -= 100;
  horizon.style.webkitTransform = 'translateX('+position+'px)';
  if (!binded) {
    horizon.addEventListener('webkitTransitionEnd',animateSquare,false);
    binded = true;
  }
})();

fiddle: http://jsfiddle.net/rVAtz/8/

Upvotes: 2

Davor Mlinaric
Davor Mlinaric

Reputation: 2027

not sure if this is what you wish

http://jsfiddle.net/rVAtz/3/

@-webkit-keyframes prop-600 {
    0% {
        -webkit-transform: translateX(0px);
    }
    50% {
        -webkit-transform: translateX(-100px);
    }
}

Upvotes: 0

Related Questions