[分享]css3文字移动动画效果

CSS3文字移动动画效果是一种常见的动画效果，可以使文字或文本元素在网页上动起来，增加页面的动态感和趣味性。这种动画效果通常使用CSS3的transition或animation属性来实现。/ tra...

CSS3文字移动动画效果是一种常见的动画效果，可以使文字或文本元素在网页上动起来，增加页面的动态感和趣味性。这种动画效果通常使用CSS3的transition或animation属性来实现。

/* transition动画效果 */
p {
  transition: transform 1s ease-in-out;
}
p:hover {
  transform: translateX(50px);
}

/* animation动画效果 */
@keyframes slidein {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

p {
  animation: slidein 1s ease-in-out;
} 

上述代码中，第一个部分使用了transition属性，在p元素被hover时，实现了一个向右平移50px的效果。第二个部分则是使用了animation属性，定义了一个名为slidein的动画，将p元素从页面的左侧向右滑动进入。

这种动画效果可以应用于各种文本元素，例如标题、段落、按钮等。同时，也可以通过CSS3的其他属性，如scale、rotate等来实现更多种类的动画效果。