How to make a CSS transition loop once?

Question

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

Do you have a jsfiddle of what you currently have?

Andrew
– Andrew

2013-04-30 12:27:31 +00:00
Commented Apr 30, 2013 at 12:27 — Andrew
– Andrew, Commented Apr 30, 2013 at 12:27

Stuart Wakefield · Accepted Answer · 2013-04-30 12:24:01Z

4

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.

edited Apr 30, 2013 at 12:24

answered Apr 30, 2013 at 12:15

Stuart Wakefield

6,40431 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mr. Alien Over a year ago

Nice one stuart +1 but it's better to define some color or use inherit instead of auto

Stuart Wakefield Over a year ago

Thanks, I think inherit will use the color from the parent element, whereas using auto allows you to use any initial color that was previously set for the element. This fiddle shows that using inherit "steals" the parents color definition rather than keeping the elements original color. jsfiddle.net/qzEFL/1

Chris Over a year ago

That's perfect thanks Stuart. Just out of interest how well supported is @keyframes?

Stuart Wakefield Over a year ago

NP, literature at MDN: developer.mozilla.org/en-US/docs/CSS/…, supported FF, Chrome, Safari, Opera, from a couple of versions back, IE 10

Mr. Alien · Accepted Answer · 2013-04-30 12:09:48Z

1

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

answered Apr 30, 2013 at 12:09

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

1 Comment

Chris Over a year ago

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

Lajos Arpad · Accepted Answer · 2022-02-19 15:27:35Z

1

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.

edited Feb 19, 2022 at 15:27

Lajos Arpad

80.5k42 gold badges124 silver badges235 bronze badges

answered Feb 13, 2022 at 3:53

Nytswa

376 bronze badges

Collectives™ on Stack Overflow

How to make a CSS transition loop once?

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related