css3实现延迟几秒 |css reset 京东

.delay {
animation-delay: 2s;
/* 此处2s即表示延迟2s */
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: forwards;
}

以上是用CSS3实现延迟几秒的代码，在代码中大家通过animation-delay属性设置了延迟时间，然后在关键帧动画中定义了渐入的效果，最后在.fade-in类中引用了该动画。需要注意的是，animation-fill-mode属性设置为forwards，是为了保持动画的最终权值不被还原。

通过这种方式，大家可以轻松地实现页面元素的延迟渐入效果。CSS3的强大效果为大家的页面呈现提供了更多可能性，同时也极大地拓宽了前端开发者的创作空间。