CODEWITHSUNDEEP
csscss-animations
Vlad
Vlad

Reputation: 860

Why CSS animation doesn't work on links (anchor tag) the same way as text?

I have been playing with some HTML and CSS animations. But the anchor tag seams to respond differently:

HTML:

<!DOCTYPE html>

<html><head><title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body id="home">

<ul id="menu-list">
    <p>text</p>
    <li>text <a class="home" href="#home">Home</a></li>
    <li><a class="about" href="#about">About</a></li>text
    <li><a class="contact" href="#contacts">Contact</a></li>
    <div>text</div>
</ul>

</body></html>

CSS:

@charset "utf-8";

@-webkit-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
   @-moz-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
    @-ms-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
     @-o-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
        @keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}

#menu-list {
    -webkit-animation: redtowhitetext 3s infinite;
       -moz-animation: redtowhitetext 3s infinite;
        -ms-animation: redtowhitetext 3s infinite;
         -o-animation: redtowhitetext 3s infinite;
            animation: redtowhitetext 3s infinite;
}

Result:
Result

Text inside p, div or no tag oscillates from red to white color as it should. But text inside anchor tags doesn't. Why does the anchor tag behave differently and how can I get it to respond to animations as intended?

If you add a {color: inherit} the links will animate too. But if if you want to target links only or a specific link - change the selector to #menu-list a , then only links that were not visited will animate: Result 2

Can you please also explain this behavior when providing the solution.

Upvotes: 4

Views: 2438

Answers (3)

Vlad
Vlad

Reputation: 860

Since adding animation to a:visited doesn't animate visited links, in the absence of a better solution, using suggestions thanks to alireza safian and M.Matias, I am going to suggest the following solution to animate a link:

Add a wrapper to your link. Animate the wrapper tag. Set a {color: inherit}.

HTML:

  <!DOCTYPE html>

<html><head><title>Test</title>
<link rel="stylesheet" type="text/css" href="menu-top.css"/>
</head>

<body id="home">

    <ul id="menu-list">
        <li class="home"><a href="#home">Home</a></li>
        <li class="about"><a href="#about">About</a></li>
        <li class="contact"><a href="#contactss">Contact</a></li>
    </ul>

</body></html>

CSS:

@charset "utf-8";

@-webkit-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
   @-moz-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
    @-ms-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
     @-o-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
        @keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}

.contact, .about {
    -webkit-animation: redtowhitetext 3s infinite;
       -moz-animation: redtowhitetext 3s infinite;
        -ms-animation: redtowhitetext 3s infinite;
         -o-animation: redtowhitetext 3s infinite;
            animation: redtowhitetext 3s infinite;
}

a {color: inherit;}

Result: Result

Upvotes: 1

Alex
Alex

Reputation: 8695

The a element inherits its color from browser by default so if you add inherit value, it will get its color from its parent. For visited link problem you can use :visited.

Add color:inherit; to the a element. Jsfiddle

a,
a:visited
{
  color: inherit;
}


@-webkit-keyframes redtowhitetext {

    0% {

        color: red;

    }

    50% {

        color: white;

    }

    100% {

        color: red;

    }

}

@-moz-keyframes redtowhitetext {

    0% {

        color: red;

    }

    50% {

        color: white;

    }

    100% {

        color: red;

    }

}

@-ms-keyframes redtowhitetext {

    0% {

        color: red;

    }

    50% {

        color: white;

    }

    100% {

        color: red;

    }

}

@-o-keyframes redtowhitetext {

    0% {

        color: red;

    }

    50% {

        color: white;

    }

    100% {

        color: red;

    }

}

@keyframes redtowhitetext {

    0% {

        color: red;

    }

    50% {

        color: white;

    }

    100% {

        color: red;

    }

}

#menu-list {

    -webkit-animation: redtowhitetext 3s infinite;

    -moz-animation: redtowhitetext 3s infinite;

    -ms-animation: redtowhitetext 3s infinite;

    -o-animation: redtowhitetext 3s infinite;

    animation: redtowhitetext 3s infinite;

}

a,
a:visited {

    color:inherit;
<!DOCTYPE html>
<html>
    
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    
    <body id="home">
        <ul id="menu-list">
            <p>text</p>
            <li>text <a class="home" href="#home">Home</a>
            </li>
            <li><a class="about" href="#about">About</a>
            </li>text
            <li><a class="contact" href="#contacts">Contact</a>
            </li>
            <div>text</div>
        </ul>
    </body>

</html>

Upvotes: 2

M.Matias
M.Matias

Reputation: 107

Add the a tag to your css.

#menu-list,
#menu-list li a {
-webkit-animation: redtowhitetext 3s infinite;
   -moz-animation: redtowhitetext 3s infinite;
    -ms-animation: redtowhitetext 3s infinite;
     -o-animation: redtowhitetext 3s infinite;
        animation: redtowhitetext 3s infinite;
}

See : http://jsfiddle.net/gchqwnnb/

Upvotes: 2

Related Questions