CODEWITHSUNDEEP
csscss-animations
user3265943
user3265943

Reputation: 339

Animation-delay then pseudo class before?

Is there a way to use the 'animation-delay' (of the transition-delay) to make a delay of few seconds and then change the :before of the same element?

What i want to do is when user held the button for more then few second(:active state) make a change to the :before. (I want to switch the button web-icon).

Is that possible? any other alternative ? I don't want to use js.

here is what I mean,I want the before to happend only after 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";
    }
}

Upvotes: 3

Views: 1054

Answers (2)

RichieAHB
RichieAHB

Reputation: 2088

Check this updated fiddle

Rather than replace the content property, leverage both the :before and :after pseudo elements and have one come in delayed over the other instead. You could also have one fade out when the other fades in by basically doing the opposite (if you don't have solid backgrounds).

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

Upvotes: 1

Woodrow Barlow
Woodrow Barlow

Reputation: 9047

Here is a simple example using the transition property to do what you describe.

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

Upvotes: 1

Related Questions