Question

有没有办法使用动画延迟＆＃39; （转换延迟的）延迟几秒然后改变：在同一个元素之前？

我想要做的是当用户按住按钮超过几秒钟时（：活动状态）更改为：之前。（我想切换按钮web-icon）。

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

这就是我的意思，我希望之前的事情只发生在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

Answer 2

检查此更新 fiddle

不是替换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;
}

动画延迟然后伪类？

2 个答案: