Codesandbox:Codesandbox. IO/s/infinity -… The idea is very simple, the original is not so complex as imagined, only need a CSS property can be achieved, of course, GIF looking at the graph a little shake this is normal, the actual look and feel will be more smooth.

Rolling effects

 @keyframes mymove {
  0% {
    transform: translate3d(0.0.0);
  }
  100% {
    transform: translate3d(0, -50%.0); }}animation: mymove 6s infinite linear;
Copy the code

You only need to understand this one animation property, CSS Animation has helped you to achieve infinite scrolling effects.

  • Mymove animation – is the name of your animation name, we use the transform – CSS: Cascading Style Sheets | MDN attribute to move our elements, here is not opened.

  • 6s animation-duration is how long it takes for your animation to complete once, which controls your speed, meaning that the more time you have, the faster it will be, while your height remains the same

  • Lnfinite animation-restor-count Specifies the number of animations to execute

  • Linear is called animation-timing-function in animation, which is the effect of time and speed of each cycle. Linear refers to uniform speed

Seamless rolling

I started out thinking very complicated about this, figuring out how long and how high the last element is from the top, and then figuring out the best time to insert the first one. After referring to other people’s articles, read and read again and again only to find that they want to trouble, so read articles and documents to read slowly do not hurry.

After 100% of the height is rolled, there is a blank space and infinite is set, so restart the animation and it will flash. If we use two copies of the same data, we only display half the content (that is, the container is only half the height). When the first data is finished, it will blink because of blank, but the first data in the second data just replaces the first data displayed at the beginning, because the content before and after the flash is the same, so there is no blinking effect. This is when two identical objects switch quickly before your eyes (height is not shown here for display).

So, we actually only need to move 50% of the height of the first data, and the second data takes over from the first data, and at this point the animation is done, and the second one is done and it’s seamless.

In real development, however, it is possible not to know the height of an element because the height is likely to change, so you need the DOM API to calculate the height.

reference

  • With CSS3 to achieve infinite loop seamless rolling