css屏幕滚动到某处div从两侧弹入

CSS屏幕滚动到某处div从两侧弹入

body {
      overflow-x: hidden;
}
.animated {
      animation-duration: 1s;
      animation-fill-mode: both;
}
@keyframes slideInLeft {
  0% {
        transform: translateX(-100%);
        visibility: visible;
  }
    100% {
        transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
        transform: translateX(100%);
        visibility: visible;
  }
  100% {
        transform: translateX(0);
  }
}
.left {
      animation-name: slideInLeft;
}
.right {
      animation-name: slideInRight;
}
.section {
      position: relative;
      height: 100vh;
      width: 100vw;
}
.first {
      background-color: #FFBE67;
}
.second {
      background-color: #FFA785;
}
.third {
      background-color: #FF7474;
}
    

我们可以使用CSS的动画功能来实现屏幕滚动到某处div从两侧弹入的效果。首先，我们需要将 body 标签的 overflow-x 属性设置为 hidden，以确保当内容向左或向右动画滚动时内容不会跑出页面的宽度。

然后，我们可以为带有该效果的元素添加一个通用的动画样式类 .animated，并分别为元素创建左侧滑入和右侧滑入的动画样式类 .left 和 .right。

我们还需要为两个动画样式类分别创建自己的关键帧动画 @keyframes，来定义元素的起始位置和结束位置。

最后，我们只需将该效果应用到需要滑入的每个元素的父元素 .section，并为每个独立的区域添加自己的背景颜色。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！