css - Animation-delay 那么伪类之前呢？

Question

有没有办法使用(transition-delay 的)'animation-delay' 来延迟几秒钟，然后更改同一元素的 :before？

我想做的是当用户按住按钮几秒钟以上(:事件状态)时，对 :before 进行更改。 (我想切换按钮网络图标)。

这可能吗？还有其他选择吗？我不想使用 js。

这就是我的意思，我希望 before 只在 2s 之后发生。

&:active {
    -webkit-animation-name: spaceboots;
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s;
    width: 45px;

    &:before {
        content: "now text show";
    }
}

Answer 1

这是一个使用 transition 属性来执行您描述的操作的简单示例。

a:before {
    background-color:red;
}

a:active:before {
    /* the background will transition quickly after 3 seconds */
    transition-delay:2s;
    background-color:green;
}

here is an example