css3文字弹出动画效果

CSS3中提供了丰富的动画效果，其中文字弹出效果可以为网站增加一些趣味性和交互性。下面我们来看一些常用的CSS3文字弹出动画效果。

/* 文字从上方弹出 */
@keyframes slideInUp {
   from {
      transform: translateY(-100%);
   }
   to {
      transform: translateY(0);
   }
}
.slideInUp {
   animation-name: slideInUp;
   animation-duration: 1s;
   animation-fill-mode: both;
}

/* 文字从下方弹出 */
@keyframes slideInDown {
   from {
      transform: translateY(100%);
   }
   to {
      transform: translateY(0);
   }
}
.slideInDown {
   animation-name: slideInDown;
   animation-duration: 1s;
   animation-fill-mode: both;
}

/* 文字从左侧弹出 */
@keyframes slideInLeft {
   from {
      transform: translateX(-100%);
   }
   to {
      transform: translateX(0);
   }
}
.slideInLeft {
   animation-name: slideInLeft;
   animation-duration: 1s;
   animation-fill-mode: both;
}

/* 文字从右侧弹出 */
@keyframes slideInRight {
   from {
      transform: translateX(100%);
   }
   to {
      transform: translateX(0);
   }
}
.slideInRight {
   animation-name: slideInRight;
   animation-duration: 1s;
   animation-fill-mode: both;
}

/* 文字浮现效果 */
@keyframes fadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}
.fadeIn {
   animation-name: fadeIn;
   animation-duration: 1s;
   animation-fill-mode: both;
}

以上为常用的文字弹出动画效果，在使用时需要定义相应的class，然后添加到元素中即可。使用CSS3动画效果可以为网站增添一些活力，提升用户体验。