css滚屏动画

CSS滚屏动画是网页设计中经常使用的一种效果，在滚动时可以让页面元素以各种不同的形式进行动画展现，给用户带来更好的视觉体验。以下是一些常见的滚屏动画。

/* 淡入淡出效果 */
.fade-in {
opacity: 0;
animation-name: fade-in;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 左右滑动 */
.slide-from-left {
transform: translateX(-100%);
animation-name: slide-from-left;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes slide-from-left {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.slide-from-right {
transform: translateX(100%);
animation-name: slide-from-right;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes slide-from-right {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
/* 上下滑动 */
.slide-from-top {
transform: translateY(-100%);
animation-name: slide-from-top;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes slide-from-top {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
.slide-from-bottom {
transform: translateY(100%);
animation-name: slide-from-bottom;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes slide-from-bottom {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}

上面是常见的CSS滚屏动画，通过CSS的animation属性可以实现各种各样的动画效果。同时，借助JavaScript可以实现更加复杂的滚屏动画，让页面效果更加优美。

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