[分享]css3文字平移动态效果

CSS3中有很多动态效果，其中之一就是文字平移动态效果。这种效果可以使文本在页面上动态平移，从而增加页面的视觉效果。.textanimated { animation: textslide 2s in...

CSS3中有很多动态效果，其中之一就是文字平移动态效果。这种效果可以使文本在页面上动态平移，从而增加页面的视觉效果。

.text-animated {
  animation: text-slide 2s infinite;
}

@keyframes text-slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
} 

以上代码就是实现文字平移动态效果的样式。.text-animated类设置了一个动画属性，animation，其参数分别是动画名称，动画持续时间以及动画播放次数。在这里设置了无限循环播放。接下来，我们需要定义关键帧，即动画的起始和结束状态。这里我们使用了transform属性，来改变文字元素的位置。

在@keyframes中，我们定义了三个阶段，0%、50%和100%。分别对应动画的起始、中间和结束状态。在起始状态下元素的位置是不需要改变的，在50%的状态下，元素向右平移100%，到达页面的最右侧。在100%的状态下，元素回到页面的最左侧位置，并向左平移100%。

这样，文字平移动态效果就完成了。我们可以根据自己的需求，设置不同的动画持续时间、播放次数，以及改变元素的位置和方向。