How to make a CSS transition loop once?

css, html

Solution

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.

Problem

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

Original source