[分享]css3左右上下滑动效果

Css3是一个非常强大的样式语言，可以用来创建各种各样的动画和效果。其中之一就是左右上下滑动效果。

.slide-right {
  animation-name: slide-right;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

@keyframes slide-right {
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0);
  }
}

.slide-left {
  animation-name: slide-left;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

@keyframes slide-left {
  0% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(0);
  }
}

.slide-up {
  animation-name: slide-up;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

@keyframes slide-up {
  0% {
    transform: translateY(200%);
  }
  100% {
    transform: translateY(0);
  }
}

.slide-down {
  animation-name: slide-down;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

@keyframes slide-down {
  0% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(0);
  }
} 

以上样式代码分别是四种不同方向的滑动效果。你可以将其应用到你的HTML元素中，并为其添加想要的类名，就可以轻松实现这些效果了。