SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Fr
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Cancel a CSS3 animation when anchor is visited

    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. 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 Code:
    <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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Fr
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by eSite View Post
    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 ?
    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. #5
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Fr
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :-(

    HTML Code:
    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by eSite View Post

    Even if I don't use :visited it doesn't work :-(
    What do you mean exactly - its blinking away for me like mad.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Fr
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I mean the animation doesn't stop even if I don't write a rule with :visited

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by eSite View Post
    I mean the animation doesn't stop even if I don't write a rule with :visited
    You lost me there. 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. #9
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Fr
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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. #11
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Fr
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    visited not hover (I know this one works).

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by eSite View Post
    visited not hover (I know this one works).
    Am I living in a time warp or something lol

    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.

    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).


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •