[分享]css3多种进入效果

CSS3是一种可以帮助我们实现各种动画效果的样式语言。在其中，有一种非常流行的效果就是进入动画效果。下面将介绍几种CSS3实现的进入效果。/ 1. 淡入 / .fadein { opacity: 0;...

CSS3是一种可以帮助我们实现各种动画效果的样式语言。在其中，有一种非常流行的效果就是进入动画效果。下面将介绍几种CSS3实现的进入效果。

/* 1. 淡入 */
.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 2. 水平滑入 */
.slide-in-left {
  transform: translateX(-100%);
  animation: slideInLeft 1s ease-out forwards;
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

/* 3. 3D翻转 */
.flip-in-y {
  transform-style: preserve-3d;
  animation: flipInY 1s ease-in-out forwards;
}

@keyframes flipInY {
  0% {
    transform: rotateY(-180deg);
  }
  100% {
    transform: rotateY(0);
  }
}

/* 4. 缩放 */
.zoom-in {
  transform: scale(0);
  animation: zoomIn 0.5s ease-in-out forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

/* 5. 弹性 */
.bounce-in {
  opacity: 0;
  transform: translateY(-500px);
  animation: bounceIn 1.5s ease-out forwards;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translateY(-500px);
  }
  60% {
    opacity: 1;
    transform: translateY(30px);
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
} 

以上是几种常见的进入动画效果实现的代码，希望对大家有所帮助。