H5+CSS3 do picture carousel scrolling effect

HTML code section:

1 <DivID= "Wrap">2     <ulID= "List">3         <Li>10</Li>4         <Li>9</Li>5         <Li>8</Li>6         <Li>7</Li>7         <Li>6</Li>8 9         <Li>5</Li>Ten         <Li>4</Li> One         <Li>3</Li> A         <Li>2</Li> -         <Li>1</Li> -     </ul> the </Div>

CSS3 Code section:

1 <styletype= "Text/css">2 @-webkit-keyframes Move{3 0%{left:-500px;}4 100%{ Left:0;}5    }6 #wrap{width:600px;Height:130px;Border:1px solid #000;position:relative;margin:100px Auto;7 Overflow:Hidden;}8 9 #list{position:Absolute; Left:0;Top:0;padding:0;margin:0;Ten -webkit-animation:5s move Infinite linear;width:200%;} One  A #list Li{List-style:None;width:120px;Height:130px;Border:1px solid Red;background:Pink; - Color:#fff;text-align:Center;float: Left;Font:normal 50px/2.5em ' Microsoft ya Black ';} -  the #wrap: Hover #list{-webkit-animation-play-state:paused;} -     </style>

The end result is as follows:

H5+css3 to do the picture carousel scrolling effect