Cancel a CSS3 animation when anchor is visited

HTML & CSS
1

Hello :slight_smile:

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. The purpose is to show that a page has been updated and pulsate the link to it until the page has been visited with :visited instead of a cookie.

I have a working animation but I can’t get the :visited part to work, basically I fail to cancel the animation. Apparently the animation is cancelled for :hover with the declaration animation:none; or animation-name:none; but for :visited there’s a bug.

I’d like to know what exactly is going on and what are the possible workarounds.

Here’s the code I use


<html>
    <head>
        <title></title>
        <style type="text/css">
        
#pulsing_bg:link {
    color: red;
            background-color: yellow;
            border: 1px dashed green;
animation:            a_link 1s linear 0s infinite normal;
-moz-animation:        a_link 1s linear 0s infinite normal;
-webkit-animation:    a_link 1s linear 0s infinite normal;
}

#pulsing_bg:visited {
    color: lime;
            background-color: fuchsia;
            border: 1px dashed red;
animation:            none;
-moz-animation:        none;
-webkit-animation:    none;
/*
animation:            a_link 0s linear 0s 0 normal;
-moz-animation:        a_link 0s linear 0s 0 normal;
-webkit-animation:    a_link 0s linear 0s 0 normal;
*/
}
@keyframes a_link
{
100%    {background-color: green;}
}

@-moz-keyframes a_link
{
100%    {background-color: green;}
}

@-webkit-keyframes a_link
{
100%    {background-color: green;}
}
        </style>
    </head>
    <body>
        
 Pellentesque mollis ante eget metus auctor adipiscing.  <a href="#8" id="pulsing_bg">Sed sit amet sapien in erat gravida mollis.</a>Nam quis libero nec mauris vestibulum lacinia.
<br>
 Proin aliquet, nibh vel aliquam mollis, <a href="#10" id="pulsing_bg">Nullam et enim ligula.</a> ipsum lacus egestas erat, vehicula tempor augue nulla convallis odio.

    
    </body>
</html>
2

Hi, It doesn’t look like it can be done. You can’t change a background image on a visited link either.

Only certain things can be styled on visited links and it may be something to do with plugging the history flaw.

The blinking is rather rather annoying anyway and I think something more subtle would be appropriate :).

3

Ah crap, I heard about this. I read on other pages that transitions aren’t allowed, but they say nothing about animations. Do you have an accurate list of what’s allowed/disallowed ?

4

No I’m afraid not. Some are mentioned in the link I posted but I would guess it varies between browsers also. It’s generally accepted than only colours should be changed on visited links.

5

Yeah, but even with the animation I’m only changing the color, so it should be allowed.

Even if I don’t use :visited it doesn’t work :frowning:


a, .pulsing_bg {
	padding: 0 2px 0 2px;
	color: white;
	background-color: orange;
	border: 1px solid darkorange;
	text-decoration: none;
animation:			none;
-moz-animation:		none;
-webkit-animation:	none;

}

.pulsing_bg:link {
	color: black;
	background-color: lime;
	border: 1px solid black;

animation:			a_link 1s linear 0s infinite normal;
-moz-animation:		a_link 1s linear 0s infinite normal;
-webkit-animation:	a_link 1s linear 0s infinite normal;

}

@keyframes a_link
{
100%	{background-color: red;}
}
@-moz-keyframes a_link
{
100%	{background-color: red;}
}
@-webkit-keyframes a_link
{
100%	{background-color: red;}
}
6

What do you mean exactly - its blinking away for me like mad. :slight_smile:

7

I mean the animation doesn’t stop even if I don’t write a rule with :visited

8

You lost me there.:slight_smile: Haven’t you set the animation to infinite?

It will only stop if you set a number instead of infiniteor you use some sort of trigger to change it (like adding a class with javascript).

Or did I misunderstand?

9

Yes I have set it to infinite, but animation: none; or animation-name: none; should cancel it whatever its properties, right ?
I tried with 0 or 1 iteration, didn’t stop it.


<html>
	<head>
		<title></title>

		<style type="text/css">
		


.pulsing_bg:link {
	color: grey;
	background-color: lime;
	border: 1px solid black;

animation:			a_link 1s linear 0s infinite normal;
-moz-animation:		a_link 1s linear 0s infinite normal;
-webkit-animation:	a_link 1s linear 0s infinite normal;

}
a, .pulsing_bg, .pulsing_bg:hover {
	padding: 0 2px 0 2px;
	color: white;
	background-color: orange;
	border: 1px solid darkorange;
	text-decoration: none;

animation:			a_link 1s linear 0s 1 normal;
-moz-animation:		a_link 1s linear 0s 1 normal;
-webkit-animation:	a_link 1s linear 0s 1 normal;
}

@keyframes a_link
{
100%	{background-color: red;}
}
@-moz-keyframes a_link
{
100%	{background-color: red;}
}
@-webkit-keyframes a_link
{
100%	{background-color: red;}
}




		</style>
	</head>
	<body>
<pre>
<a href="#a">a Normal</a>

<a href="#a_link">a Link</a>

<a href="#a_visited">a Visited</a>

<a href="#nothing" class="pulsing_bg">pulsing_bg Nothing</a>

<a href="#link" class="pulsing_bg">pulsing_bg Link</a>

<a href="#visited" class="pulsing_bg">pulsing_bg Visited</a>
</pre>		
	</body>
</html>
10

We must be talking at cross purposes as I just tried the above code in Firefox, Safari and Chrome and all stop the an animation while hovered.

Or did you mean something else?

11

visited not hover (I know this one works).

12

Am I living in a time warp or something lol :slight_smile:

We established right back at the start that the animations don’t work on visited states. No fiddling around with the properties is going to make them work unfortunately. :slight_smile:

It’s either that visited states have not been implemented or it may be because of the security issues I mentioned above as I guess animations require resources that can be traced to identify the history (that’s just a guess though).