CSS
.rolled { position: absolute; top: 0; width: 80px; height: 500px; background: -moz-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .2)50%, rgba(255, 255, 255, 0)100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, .2)), color-stop(100%, rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .2)50%, rgba(255, 255, 255, 0)100%); background: -o-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .2)50%, rgba(255, 255, 255, 0)100%); -webkit-transform: skewX(-25deg); -moz-transform: skewX(-25deg); -webkit-animation: rolled 2.5s .2s ease both infinite; -moz-animation: rolled 2.5s .2s ease both infinite; -o-animation: rolled 2.5s .2s ease both infinite; -ms-animation: rolled 2.5s .2s ease both infinite; overflow: hidden; } @-webkit-keyframes rolled { 0% { left: -150px; } 100% { left: 920px; } }HTML
<div class="box"> <img src="http://tangjiusheng.com/d/file/css3/2017-05-24/f2ff69d3c4e94e4a65c9f4ab203d4811.jpg"> <div class="rolled"></div> </div>停止动画`
-webkit-animation-play-state: paused;