0

i think everything all ok but stil not working...

ff - ok

edge, opera, more - not working good (adds a pause at the end ... sometimes skips the last few frames)

#box{
  overflow: hidden;
  width: 416px;
  height: 416px;
  margin: 0px;
  padding: 0px;
  display: inline-block;
  border: 0px;
  font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
}
#tlo{
  width: 12064px;
  height: 416px;
  background-image:
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka00.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka01.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka02.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka03.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka04.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka05.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka06.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka07.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka10.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka11.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka14.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka15.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka16.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka17.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka18.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka19.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka20.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka21.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka22.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka23.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka24.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka25.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka26.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka27.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka28.jpg');
  background-repeat: no-repeat;
  background-position: 0px, 416px, 832px, 1248px, 1664px, 2080px, 2496px, 2912px, 3328px, 3744px, 4160px, 4576px, 4992px, 5408px, 5824px, 6240px, 6656px, 7072px, 7488px, 7904px, 8320px, 8736px, 9152px, 9568px, 9984px, 10400px, 10816px, 11232px, 11648px;
  position: relative;
  left: 0;
  top: 0;
}
#tlo:hover{
 animation-name: tlo-tumb-animacja;
 animation-duration: 1s;
 animation-timing-function: steps(28);
 animation-iteration-count: infinite;
}
@keyframes tlo-tumb-animacja {
 from {transform: translateX(0);}
 to {transform: translateX(-96.55172414%);}
}
<h2>everyimages:</h2><br>
<div id="box1">
  <div id="tlo">
  </div>
</div>
<h2>animation:</h2>
<div id="box">
  <div id="tlo">
  </div>
</div>

does it take some time to return to position zero ... more than one frame? is the number of elements translated into div's length a problem? where is the mistake? browsers (console) say everything is ok ... no bugs ... Codepen

Tomasz Galubiński
  • 1
  • 1
  • If you want to make a live demo, please use a [Stack Snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do), not an off-site link that is subject to rot. – Cody Gray - on strike Dec 02 '21 at 00:22

2 Answers2

0

One way round this 'flashing' problem is to have two complete copies of the background images.

Then just have half the number of steps and translate to -50% instead of -100%.

This helps because the whole thing repositions itself but to the same visual effect as when it's 50% translated so there is no jump.

Just for demo I've cut it in half so there are 14 steps (so I didn't copy the background again) but of course you'll want to put all your 28 images in twice for the real use.

* {
  margin: 0;
}

#box{
  overflow: hidden;
  width: 416px;
  height: 416px;
  margin: 0px;
  padding: 0px;
  display: inline-block;
  border: 0px;
  font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
}
#tlo{
  width: 12064px;
  height: 416px;
  background-image:
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka00.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka01.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka02.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka03.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka04.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka05.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka06.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka07.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka10.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka11.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka14.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka15.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka16.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka17.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka18.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka19.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka20.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka21.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka22.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka23.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka24.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka25.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka26.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka27.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka28.jpg');
  background-repeat: no-repeat;
  background-position: 0px, 416px, 832px, 1248px, 1664px, 2080px, 2496px, 2912px, 3328px, 3744px, 4160px, 4576px, 4992px, 5408px, 5824px, 6240px, 6656px, 7072px, 7488px, 7904px, 8320px, 8736px, 9152px, 9568px, 9984px, 10400px, 10816px, 11232px, 11648px;
  position: relative;
  left: 0;
  top: 0;
}
#tlo:hover{
 animation-name: tlo-tumb-animacja;
 animation-duration: 1s;
 animation-timing-function: steps(14);
 animation-iteration-count: infinite;
}
@keyframes tlo-tumb-animacja {
 from {transform: translateX(0);}
 to {transform: translateX(-50%);}
}
<h2>everyimages:</h2><br>
<div id="box1">
  <div id="tlo">
  </div>
</div>
<h2>animation:</h2>
<div id="box">
  <div id="tlo">
  </div>
</div>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
0

still working ... add preload for css like Preloading CSS Images ... did not help

but now I see - #box with css {overflow: hidden; & more} have problem ... #box1 without css works fine

when i use 8 pic> all alright ... 29> problem ... too long div? no - #box1 works!

body::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1; 
   content:url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka00.jpg') 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka01.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka02.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka03.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka04.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka05.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka06.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka07.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka08.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka09.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka10.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka11.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka12.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka13.jpg') 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka14.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka15.jpg') 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka16.jpg') 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka17.jpg') 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka18.jpg') 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka19.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka20.jpg') 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka21.jpg') 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka22.jpg') 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka23.jpg') 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka24.jpg') 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka25.jpg') 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka26.jpg') 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka27.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka28.jpg');
}
* {
  margin: 0;
}
#box{
  overflow: hidden;
  width: 416px;
  height: 416px;
  margin: 0px;
  padding: 0px;
  display: block;
  border: 0px;
  font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
}
#tlo{
  width: 12064px;
  height: 416px;
  background-image:
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka00.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka01.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka02.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka03.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka04.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka05.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka06.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka07.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka08.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka09.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka10.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka11.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka12.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka13.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka14.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka15.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka16.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka17.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka18.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka19.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka20.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka21.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka22.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka23.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka24.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka25.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka26.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka27.jpg'), 
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka28.jpg');
  background-repeat: no-repeat;
  background-position: 0px, 416px, 832px, 1248px, 1664px, 2080px, 2496px, 2912px, 3328px, 3744px, 4160px, 4576px, 4992px, 5408px, 5824px, 6240px, 6656px, 7072px, 7488px, 7904px, 8320px, 8736px, 9152px, 9568px, 9984px, 10400px, 10816px, 11232px, 11648px;
  position: relative;
  left: 0;
  top: 0;
}
#tlo:hover{
 animation-name: tlo-tumb-animacja;
 animation-duration: 1s;
 animation-timing-function: steps(29);
 animation-iteration-count: infinite;
}
@keyframes tlo-tumb-animacja {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-12064px);
  }
}
<h2>animation:</h2>
<div id="box">
  <div id="tlo">
  </div>
</div>
<h2>everyimages:</h2><br>
<div id="box1">
  <div id="tlo">
  </div>
</div>
Tomasz Galubiński
  • 1
  • 1
  • Hello Tomasz: this answer should be part of the original question, you can title it as *addendum* and keep it there. In this way your whole process can be understood by whoever gets to the question at once. BTW [consider preloading the images like so](https://stackoverflow.com/a/11522145/345605), playing them only when they have finished loading. Also: this may work better as an .MP4 – ganar Dec 02 '21 at 14:41
  • hello :) next time i will use _italic_ addendum _italic_ ... mp4 - this is my first choice but still want to know whyyyyy doesn't work when i use overflow and width in parent div... – Tomasz Galubiński Dec 02 '21 at 15:57