[分享]css3动画滚动执行触发

CSS3动画滚动执行触发是CSS3的一个重要特性，在网页设计中有着广泛的应用。它可以让网页的内容更具有活力和吸引力。/滚动执行动画/ keyframes slideInFromLeft { 0 { t...

CSS3动画滚动执行触发是CSS3的一个重要特性，在网页设计中有着广泛的应用。它可以让网页的内容更具有活力和吸引力。

/*滚动执行动画*/

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-left {
  animation: slideInFromLeft 1s ease-out;
  animation-fill-mode: forwards;
  opacity: 0;
} 

上面的CSS3代码实现了一个从左侧滚动进入的动画效果。可以看出，这个动画的执行是通过CSS3中的关键帧（@keyframes）来实现的。

在针对移动端的设计中，滚动执行触发还可以实现一些特殊效果，比如：
1.通过滚动触发改变导航栏的样式；
2.滚动触发数字的递增/递减效果；
3.滚动到指定位置出现图片或文字。

/*滚动触发效果*/

/*导航栏变化*/

.header-fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  transform: translateY(-100%);
}

.header-active {
  transform: translateY(0);
  transition: transform .4s linear;
}


/*数字递增*/

@keyframes count-up {
  from { 
    opacity: 0;
    transform: translateY(50%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.number {
  font-size: 48px;
  text-align: center;
  animation: count-up 1s ease-out;
  animation-fill-mode: forwards;
  opacity: 0;
}

.number-active {
  opacity: 1;
}

/*滚动到位置出现动画*/

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.image {
  width: 100%;
}

.image-active {
  animation: fadeIn 1s ease-out;
  animation-fill-mode: forwards;
  opacity: 0;
} 

可以看出，滚动执行触发的实现需要借助CSS3的关键帧、动画属性和过渡属性进行调整。这种方式下，能够让网页更加灵活和多变，满足各种不同场景下的需求。