CSS3 Implementing the Carousel Animation code

Simple implementation of Carousel animation

Now the front end, more and more focus on user interaction and experience, there are many animations and effects are very common, such as the topic to be told: Carousel Animation. This is the same as a noun that was often heard before – the "marquee" effect. Before CSS3 came out, they were all animated by JavaScript, and now we can use CSS3 completely, with great performance improvements and compatibility, especially on the mobile side.

CSS3 animation performance can be greatly improved, especially when the page animation more or more timers.

HTML structure:

    <H2>CSS implementation 

As you can see, you still need to add a repeating helper element behind it to achieve the cyclic carousel effect.

CSS code:

    Carousel Animation @-webkit-keyframes Marquee {0% {-webkit-transform:translate3d (0, 0, 0);            } 27% {-webkit-transform:translate3d (0, 0, 0);            } 33% {-webkit-transform:translate3d (0,-100%, 0);            } 60% {-webkit-transform:translate3d (0,-100%, 0);            } 67% {-webkit-transform:translate3d (0,-200%, 0);            } 94% {-webkit-transform:translate3d (0,-200%, 0);            } 100% {-webkit-transform:translate3d (0,-300%, 0);            }} @keyframes Marquee {0% {transform:translate3d (0, 0, 0); }/* 100/3 * (2s/2.5s) = 26.7% = 27% */27% {transform:translate3d (0, 0, 0)            ; }/* 100/3 =>33.3 = 33% */33% {TRANSFOrm:translate3d (0,-100%, 0);            } 60% {Transform:translate3d (0,-100%, 0);            } 67% {Transform:translate3d (0,-200%, 0);            } 94% {Transform:translate3d (0,-200%, 0);            } 100% {Transform:translate3d (0,-300%, 0);            }}. wrapper-css {width:200px;            height:30px;            margin:10px;        Overflow:hidden;            }. container-css {height:30px; -webkit-animation:marquee 7.5s linear infinite;/* 2.5s (2s + 0.5s) * 3 = 7.5s */Animation:marquee 7.5s Li        Near Infinite;            }. container-css p {width:100%;            height:30px;            margin:0;            line-height:30px;        font-size:18px; }

As above, we use CSS3 to define animation keyframes, and combine transform displacement to achieve seamless carousel animation, by moving the container to achieve the carousel effect, mainly need to calculate the animation key frame points according to the Carousel element