注意：此次动画的目的是在圆内做动画，而动画效果不会超出圆的范围外
在制作这个效果的时候，我一开始想到的就是以下的做法：
CSS：
.circle{width: 200px;height: 200px;border-radius: 200px;background: rgba(0,0,0,0.5);overflow: hidden;position: absolute;}
.text{position: absolute;top: 0;left: 0;-webkit-transform:translateX(-200px);}
.text.show{
-webkit-animation:text 1.5s infinite forwards;
}
@-webkit-keyframes text{
0%{-webkit-transform:translateX(-200px);}
100%{-webkit-transform:translateX(0px);}
}
HTML： <div class="circle"> <div class="text">fsd465s4fasf4s65afsdfs654s54fsfs6a</div> </div>
结果出现以下这样的情况：
解决办法是在css中的
.circle{width: 200px;height: 200px;border-radius: 200px;background: rgba(0,0,0,0.5);overflow: hidden;position: absolute;-webkit-mask-image:url(mask.png);-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 0;}
添加了遮罩；
最终效果：
现在文字在圈圈范围内做动画 并且不超出圆的范围了~是不是觉得很简单了~
原文：http://www.cnblogs.com/tingting4133/p/4054790.html