css3实现画对号动画

目标：实现对号动画，慢慢画出来的感觉；

原理：外层div的背景是一个对号图片，用一个div做遮罩，让遮罩div层从左到右做运动一次即可实现动画，需要注意的是遮罩div的初始位置应该在外层div的外面；

代码如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css对号动画</title>
<style type="text/css">
.td {
	position: relative;
	background: #5bd8ca url(d.png) no-repeat;
	width: 24px;
	height: 35px;
	overflow: hidden;
}
.td img {
	width: 24px;
	height: 35px;
}
.mask {
	position: absolute;
	width: 24px;
	height: 35px;
	animation: myfirst 2s;
	-moz-animation: myfirst 2s;
	-webkit-animation: myfirst 2s;
	-o-animation: myfirst 2s;
	top: 0;
	background: #5bd8ca;
	left: 24px;
}
@keyframes myfirst {
0% {
left: 0;
}
100% {
left:24px;
}
}
 @-moz-keyframes myfirst {
0% {
left: 0;
}
100% {
left:24px;
}
}
 @-webkit-keyframes myfirst {
0% {
left: 0;
}
100% {
left:24px;
}
}
 @-o-keyframes myfirst {
0% {
left: 0;
}
100% {
left:24px;
}
}
</style>
</head>

<body>
<div class="td">
  <div class="mask"></div>
</div>
</body>
</html>