CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 441

How to make a CSS transition loop once?

I am trying to make some text fade to a new colour and then back to it's original colour.

#sidebar2:target .phonenumber { 
    -o-transition:0.7s;
    -ms-transition:0.7s;
    -moz-transition:0.7s;
    -webkit-transition:0.7s;
    transition:0.7s;
    color: yellow;
}

Currently it just goes to the new colour and stays like that. How can I adapt this code so that is does what I want? Any help is appreciated!

EDIT:

I am using :target so that when a user clicks on a same page link, the part of the text that I'm linking to is highlighted. I would like the text to fade to a different colour and then back again

Upvotes: 4

Views: 5735

Answers (3)

Nytswa
Nytswa

Reputation: 37

8 years late, but there is a "psudo-selector" for visited links: :visited

(It's actually a pseudo class) Just modify the attributes you want from there. No need for animation and transitions.

Upvotes: 1

Stuart Wakefield
Stuart Wakefield

Reputation: 6414

I'm fairly certain it is not possible to loop a transition, you are able to transition from one state to another but not back again in a single transition.

To achieve the result you are looking for you would use an animation instead.

First set up the animation keyframes:

@keyframes glowyellow {
  0% { color: auto; }
  50% { color: yellow; }
  100% { color: auto; }
}

Then to use this on your element:

#sidebar2:target .phonenumber {
  animation: glowyellow 1.4s linear;
}

Use vendor prefixes to support browsers as you are doing in your example.

Here is a fiddle as an example.

Upvotes: 4

Mr. Alien
Mr. Alien

Reputation: 157314

Do you mean something like this?

Demo

span {
    color: #000;
    transition: color 1s;
    /* Not using proprietary codes here, you can add it if you need */
}

span:hover {
    color: #aaa;
}

Upvotes: 1

Related Questions