Cancel a CSS3 animation when anchor is visited

[skcirtssc]

Hello :-)

I want to infinitely pulse the background colour of an identified anchor with CSS animation, and get rid of the animation altogether (= make the anchor look like other anchors) when it’s visited.

I have a working animation but I can’t get the :visited part to work, basically I fail to cancel the animation.

Here’s the code I use http://jsfiddle.net/elddifsj/cKeSV/

P.S. I do not want a javascript solution.

[joshuanhibbert]

a:visited { animation: none; }

Heh, scrap that. It works for :hover but not for :visited. Strange…

[skcirtssc]

@joshuanhibbert
Doesn’t work, and doesn’t look like a valid declaration.

[joshuanhibbert]

Why doesn’t it look like a valid declaration? It works fine on :hover, I have tested it.

[skcirtssc]

Doesn’t look valid because it’s a shorthand with 6 values and the only one where none is allowed is the name.
From my test :hover works in webkit, :visted works nowhere.
Have you got a demo ?

[chrisburton]

Try testing outside of jsfiddle?

[joshuanhibbert]

Shorthand doesn’t require each value to be present, only those you are using. Think about the shorthand for background, it still works fine if you only declare a color.

Here is a test case: http://tinkerbin.com/c0SK9ejA

The other way you can do it, if you don’t want to use animation: none; is to set the animation on the following selecter:

a:not(:visited)

Although that won’t work yet as we have learnt that animations don’t play nice with the :visited pseudo-class.

[skcirtssc]

Ok apparently animation-name: none means no animation, kinda weird.

I’m testing my code and joshuanhibbert’s both locally and on the sites, the animation pauses on hover but continues on visited. I use Coda, Safari 5.1, FF 5, Chrome 12. The other properties like color on visited don’t always work. The animation seems to mess things up.

[skcirtssc]

”Although that won’t work yet as we have learnt that animations don’t play nice with the :visited pseudo-class. ”
You mean :not pseudo class ? otherwise where have we learnt this ? you told me earlier that it should work

[chrisburton]

No, :not is an invalid selector.

[joshuanhibbert]

@skcirtss animation-name: none; doesn’t mean don’t run any animation. It means run the animation with the name of none. As there isn’t one defined it runs nothing. In regards to where we learnt that animations don’t play nice with :visited, refer to my first comment:

It works for :hover but not for :visited. Strange…

[chrisburton]

Probably because I’ve never heard of it until reading the spec. Which shows it was JUST introduced. My fault.

[skcirtssc]

See http://www.w3schools.com/cssref/css3_pr_animation-name.asp
It says “Specifies that there will be no animation”
If it meant the animation named none then it wouldn’t cancel the animation because there can be several on the page.

I didn’t see your edited comment, better post a new message.

[joshuanhibbert]

@skcirtssc You are correct, I tested that and it wouldn’t run an animation named none. That also means that the shorthand I was using earlier is correct (animation: none;).

[chrisburton]

@joshuanhibbert: @ChristopherBurton It was introduced with CSS3, I wouldn’t regard CSS3 as JUST introduced

read the date? I didn’t say “CSS3 was just introduced”

edit: Also, please reply instead of changing your post several times. Quirksmode introduced :not into the spec 15 months ago, is that what you’re saying or are saying he mentioned it and it became part of the spec?

[Author]

Posts