使用CSS要使元素的样式延时展示 虽然CSS最为一个样式语言并没有为我们提供这样的延时方法 但是我们可以使用 CSS3 中的 animation 动画属性来实现, 当然animation没办法单独去实现动画,我们需要 @keyframes去创建动画
Document /* 在2秒后,将字体颜色变成红色 */ .delayed { animation: change-color 1s linear 2s forwards; } /* 定义动画 */ @keyframes change-color { to { color: red;} }Hello, world!
非常简单的逻辑,就是在动画中定义一个样式,用animation实现动画的时候,给它延时属性animation-delay添加一个时间2s, 执行时间为1s,指定动画的周期为linear, 指定动画完成后的样式animation-fill-mode为forwards,这样就能不用js去实现类似的延时展示样式的效果。
想了解更多css的animation属性:developer.mozilla.org/en-US/docs/… ————————————————
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。