css滚动时执行动画

CSS中的动画一直都是网页设计与开发中的重要元素，可以让页面更具生命力和活力。其中滚动动画是一种很常见的元素，可以带来更好的视觉体验，让用户更加沉浸其中。

 /* 创建动画 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 设置元素的初始样式 */
.fadeInUp {
opacity: 0;
animation-name: fadeInUp;
animation-duration: 1s;
animation-fill-mode: both;
} 

在上述代码中，我们创建了一个名为fadeInUp的动画，即元素向上淡入的动画。首先设置了动画的起始位置和结束位置，包括元素的不透明度和位移。然后通过设置.fadeInUp的样式来应用该动画，并设置了动画持续时间和填充模式。

接下来，我们需要触发这个动画，让它随着用户的滚动而执行：

 /* 当元素出现在视窗中时触发 */
.fadeInUp {
opacity: 0;
animation-name: none;
animation-fill-mode: none;
}
.fade-in-up-visible {
opacity: 1;
animation-name: fadeInUp;
animation-duration: 1s;
animation-fill-mode: both;
animation-delay: 0.2s;
} 

在上述代码中，我们给.fadeInUp设置了默认的样式，而使用.fade-in-up-visible来触发动画。当元素出现在视窗中时，我们通过添加.fade-in-up-visible类来将其透明度设置为1并应用fadeInUp动画。我们还为动画添加了延迟效果，让其在进入视窗后稍微等待一会儿再执行。

通过这些代码，我们在CSS中实现了滚动时执行动画的功能，带来了更加流畅和生动的页面效果。

查看更多关于css滚动时执行动画的详细内容...