C3 version of seamless rolling animation

Today, I learned custom animation and made a small case. Before writing a case, I need to know the following knowledge points:

1. Difference between custom animation and transition Animation:

Custom animation does not need to be triggered, transition animation needs to be triggered

2. Important attributes of transition Animation: animation, which is a shorthand attribute, is used to set six animation attributes, namely

Animation name: name of custom animation
Animation duration: animation duration
Animation timing function: buffer curve
Animation delay: waiting time
Animation iteration count: number of playback (infinite means countless playback)
Animation direction: Specifies whether the animation should be played back in turn.

3. Key frame: when using @ keyframes to create an animation, you need to bind it to a selector, otherwise it will not produce animation effect. You can use the keywords "from" and "to" to create a key frame, or you can use the percentage. This case uses the from and to keywords

The code is as follows:

        *{margin: 0;padding: 0}
        body{background: black}
            width: 600px;
            height: 200px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        .donghua ul{
            list-style: none;
            width: 1800px;
            position: absolute;
            left: 0;
            right: 0;
            animation: run 10s linear 0s infinite;
            display: block;
        .donghua li{
            float: left;
            cursor: pointer;
        @keyframes run{
                left: 0;
                left: -1200px;

    <div class="donghua">
            <li><img src="images/53/01.jpg" alt=""></li>
            <li><img src="images/53/02.jpg" alt=""></li>
            <li><img src="images/53/03.jpg" alt=""></li>
            <li><img src="images/53/04.jpg" alt=""></li>
            <li><img src="images/53/01.jpg" alt=""></li>
            <li><img src="images/53/02.jpg" alt=""></li>


Keywords: Attribute

Added by jhuaraya on Fri, 31 Jan 2020 11:20:52 +0200