css3动画小试

#blue_check_td{
　　margin: 0 auto 0 auto;
　　text-align: center;
}
.blue_check_div{
　　position: relative;
　　overflow: hidden;
　　display: inline-block;
}
.blue_check_div img{
　　width: 40px;
　　height: 40px;
}
.div11{
　　position: absolute;
　　top: 0; left: 0;
　　background-color: white;
　　width: 2000px;
　　height: 40px;
　　animation: myfirst 5s;
　　animation-iteration-count:1;
　　animation-fill-mode: forwards;<!--动画结束后所在的位置forwards保留在结束的位置（IE10UP）-->
}
@keyframes myfirst {
　　0%   {left: 0;}
　　100% {left:2000px;animation-play-state:paused;}}
}

<td id="blue_check_td">
　　<div class="blue_check_div">
　　　　<img src="../../images/duihao.png" style="width: 40px; height: 40px">
　　　　<div class="div11"></div>
　　　　　　<span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
　　　　</div>
　　　　<div class="blue_check_div">
　　　　　　<img src="../../images/duihao.png" style="width: 40px; height: 40px">
　　　　<div class="div11"></div>
　　</div>
</td>

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/smallroc/p/6809031.html