CSS animation to achieve scrolling

Achieved by CSS3 animations scrolling content in a particular area, when the mouse pointer up when rolling stop

Here is a list of the contents ul total of 10 pictures, but for the continuity of play, but also reproduced a li, so there is no interruption

By Animation-Play-State: paused achieve the mouse pointer up to stop scrolling

Ul added to the list of display: flex laterally arranged so that li

Description: 100% when the CSS settings are moved to the left 1200px width ul original copy, which is the total width of below 10 li

 

HTML code section

<div id="medialist" class="medialist">
                        <ul id="media">
                            <li><a href="javascript:;"><img src="img-shouye/15584288435189.png" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15572118197009.png" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518576901324.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518576575982.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518576232618.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518575784042.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518575355299.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518574954387.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518574552475.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518574162281.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15584288435189.png" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15572118197009.png" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518576901324.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518576575982.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518576232618.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518575784042.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518575355299.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518574954387.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518574552475.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518574162281.jpg" alt=""></a></li>
                        </ul>
                    </div>

CSS code section

#media{
    animation:rolling 20s infinite linear;
}
#media:hover{
    animation-play-state:paused;
}
@keyframes rolling{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-1200px);
    }
}

Page display