[分享]css关键帧实现首页入场动画

CSS关键帧动画是一种常见的网页动画效果，可以通过多个关键帧来定义网页元素的动画效果，包括首页入场动画。接下来我们将通过pre标签展示如何使用CSS关键帧动画来实现首页入场动画。/ 定义动画 / ke...

CSS关键帧动画是一种常见的网页动画效果，可以通过多个关键帧来定义网页元素的动画效果，包括首页入场动画。接下来我们将通过pre标签展示如何使用CSS关键帧动画来实现首页入场动画。

/* 定义动画 */
@keyframes fadeIn {
    0% {opacity: 0; transform: translateX(100px);}
    100% {opacity: 1; transform: translateX(0);}
}

/* 应用到元素 */
.hero {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

/* 详解实现 */ 

上述代码通过关键帧@keyframes fadeIn定义了一种入场动画效果。其中0%代表动画开始的状态，100%代表动画结束的状态。在动画开始时，元素的透明度为0，同时距离右边界100个像素； 在动画结束时，元素的透明度为1，同时从右边界向左滑动到原始位置。

通过在.hero元素中应用该动画，以及设置动画的执行时间、动画速度和动画完成后的状态（forward），我们就可以实现一个简单而华丽的首页入场动画。