4 ms·
Hi, I think the best way to solve for that is with CSS keyframe animations. lets say your on the right side of the background and need to cross over - instantl
by jjellyy 14y ago
Hi,
I think the best way to solve for that is with CSS keyframe animations. lets say your on the right side of the background and need to cross over - instantly skip to the left side of the background, and keep moving to the resting spot on the left.
@include keyframes(right-left) {
from {
@include transform( translate3d(-800px, 0px, 0px) );
}
50% {
@include transform( translate3d(-1000px, 0px, 0px) );
}
51% {
@include transform( translate3d(0px, 0px, 0px) );
}
to {
@include transform( translate3d(-200px, 0px, 0px) );
}
}
@include keyframes(left-right) {
from {
@include transform( translate3d(200px, 0px, 0px) );
}
50% {
@include transform( translate3d(0px, 0px, 0px) );
}
51% {
@include transform( translate3d(-1000px, 0px, 0px) );
}
to {
@include transform( translate3d(-800px, 0px, 0px) );
}
}
Basically whats happening is you animation smoothly for the first half, and then right in the middle you 'reposition' so the second half of the animation starts on the other side.
Im not sure if you can do 50, 50.1% but 1% over 1-2s should not be noticeable.
If your still getting jitters even with this technique, you could have two copies of the background side by side and put them in a wrapper div, call it .slider. then apply the translate on the .slider to cross over the seam, and when the animation is done instead of letting it rest on the second background you would set it to rest on the first background but in the same spot, you would apply this in the 99%, to portion of the keyframe animation.
Basically you can use 50% 51%, 99%,100% technique to shift where the animation is happening and have it look seamless even though you may be adjusting the position significantly.
does that make sense ?