.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的强大效果为大家的页面呈现提供了更多可能性,同时也极大地拓宽了前端开发者的创作空间。