动画延迟然后伪类之前

Question

有没有办法使用（转换延迟的）"animation delay"来延迟几秒，然后更改同一元素的：before？

我想做的是，当用户按住按钮超过几秒钟（：活动状态）时，对：before进行更改。（我想切换按钮网络图标）。

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

我的意思是，我希望之前的事情只发生在2秒之后。

&: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;
}

这里有一个例子

Answer 2

检查此更新的fidd

与其替换content属性，不如同时利用:before和:after伪元素，并将其中一个元素延迟到另一个元素。当另一个淡出时，你也可以通过基本上相反的方式（如果你没有坚实的背景）让一个淡出。

a {
    display: block;
    margin-left: 16px;
    position: relative;
}
a:before,
a:after {
    color: #fff;
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    right: 100%;
    width: 16px;
}
a:before {
    background-color: blue;
    content: '1';
}
a:after {
    background-color: green;
    content: '2';
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
a:active:after {
    visibility:visible;
    opacity:1;
    transition-delay:1s;
}