css中文字动画效果代码

CSS中有很多很酷的文本动画效果，今天我们来看一些代码实现。

首先是颜色变化的代码：

.color-animation {
  animation-name: colorchange;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes colorchange {
  0% {color: red;}
  25% {color: orange;}
  50% {color: yellow;}
  75% {color: green;}
  100% {color: blue;}
} 

接着是从左侧进入的代码：

.slidein-from-left {
  animation-name: slideleft;
  animation-duration: 1s;
}

@keyframes slideleft {
  from {
    left: -100%;
  }

  to {
    left: 0;
  }
} 

再是从上方进入的代码：

.slidein-from-top {
  animation-name: slidetop;
  animation-duration: 1s;
}

@keyframes slidetop {
  from {
    top: -100%;
  }

  to {
    top: 0;
  }
} 

最后是抖动的代码：

.shake {
  animation-name: shake;
  animation-duration: 0.5s;
  animation-iteration-count: 3;
  animation-direction: alternate;
}

@keyframes shake {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(5px);
  }
} 

希望以上代码可以帮助你实现更酷炫的文本动画效果。