How to use CSS3 to realize the seamless circular scrolling of news text? Example

This article mainly describes how to use CSS3 to achieve seamless connection and the effect of continuous circulation. This CSS animation loop applies not only to images but also to text segments. As long as they have mastered the common between them, the main idea is how, you can extrapolate.

One, the specific HTML code example is as follows:

<div class= "List" > <div class= "cc rowup" > <div class= "Item" >1-This is a news description one </div> &L T;div class= "Item" >2-This is a piece of news description two </div> <div class= "Item" >3-This is a piece of news description three </div> <div clas S= "Item" >4-This is a piece of news description four </div> <div class= "Item" >5-This is a piece of news description five </div> <div class= "Item" &G T;6-This is a piece of news description six </div> <div class= "Item" >7-This is a piece of news description VII </div> <div class= "Item" >8-This is a news description eight <        /div> <div class= "Item" >9-This is a news description </div> <div class= "Item" >1-This is a piece of news description one </div> <div class= "Item" >2-This is a piece of news description two </div> <div class= "Item" >3-This is a piece of news description three </div> <div Class= "Item" >4-This is a piece of news description four </div> <div class= "Item" >5-This is a piece of news description five </div> <div class= "ite M ">6-This is a piece of news description six </div> <div class=" Item ">7-This is a piece of news description VII </div> <div class=" item ">8-this    It's a news description. Eight </div> <div class= "Item" >9-This is a news description </div> </div></div> 

Second, the specific CSS code is as follows:

@keyframes rowup {    0% {        -webkit-transform:translate3d (0, 0, 0);        Transform:translate3d (0, 0, 0);    }    100% {        -webkit-transform:translate3d (0, -307px, 0);        Transform:translate3d (0, -307px, 0);}    . list{    width:300px;    border:1px solid #999;    margin:20px Auto;    position:relative;    height:200px;    Overflow:hidden;} . list. rowup{    -webkit-animation:10s rowup linear infinite normal;    animation:10s rowup linear infinite normal;    Position:relative;}

The main idea of the above CSS loop animation implementation is that

For example, we want to do an upward seamless loop animation effect, you can copy a copy of the exact same data B is placed behind the original data A, using setinterval to scroll up the parent container of a, and when the upward scroll of the distance L exactly the height of a (l==a.height ()), L=0, restart scrolling , Infinite loops.

A copy of the data is placed behind it so that when a moves up, the data behind it can fill the gaps that are leaking out. When B moves to the top of the viewable area, at which point a just moves out of the viewable area, the container is returned to 0, and the user is not aware of the first data in B. Then continue scrolling up.

Note:

To be implemented with CSS3 properties, non-animation, because transition is a manual trigger and cannot be executed indefinitely, animation just solves the problem.

This article on the CSS animation loop introduction, I hope to have the necessary friends to help.