几秒钟后改变一次背景颜色

Question

是否可以<p>使用css 小提琴在几秒钟(10到20秒)后更改元素的背景颜色？我不想使用js.

<p style="background:#E1FEE0;">Human</p>

Answer 1

使用CSS动画,你可以跳转99.9%到100%.只需在其中设置初始背景颜色(#E1FEE0)99.9%,然后在其中设置最终背景颜色100%.如果你想要的颜色过渡,只是增加的差距,并使用类似80%的例子.

这里的例子

p {
    display: inline;
    animation: background-fade 10s forwards;
}

@keyframes background-fade {
    99.9% {
        background:#E1FEE0;
    }
    100% {
        background:#000;
    }
}

为简单起见,省略了其他供应商前缀.