Get changing font color with CSS only
I have this link that shows / hides the site menu, I want to draw users ' attention to it by changing the Font color, is it possible to do only with CSS?
setInterval(function(){
if ($('#toggleMenu').hasClass('colored')) {
$('#toggleMenu').css('color','#FAFAFA');
$('#toggleMenu').removeClass('colored');
} else {
$('#toggleMenu').css('color','#0069D9');
$('#toggleMenu').addClass('colored');
}
}, 2000);header {
background-color: grey;
padding: 0 5%;
}
#toggleMenu {
text-decoration: none;
color: #FAFAFA;
transition: color 2s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<header>
<a id="toggleMenu" href="#" style="font-size: 2em"><i class="fas fa-bars"></i></a>
</header>2 answers
Is possible yes, just change the color of the icon, since it is a property that can be animated without problems. Since FontAwesome is a font vc should use color for this, and with @keygrames vc does the animation. Here you can read more about the @keyframes https://developer.mozilla.org/pt-BR/docs/Web/CSS/@keyframes
An example applying the technique.
To simulate the same effect you did with jQuery the animation has 4s, and it takes 2s to change the color (50% of the animation) and more 2s to return to the original color (another 50% of the animation). To understand better look at the code below.
.fa-bars {
color: #FAFAFA;
animation: bg 4s infinite;
}
@keyframes bg {
50% {
color: #0069D9;
}
}
header {
background-color: silver;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<header>
<a id="toggleMenu" href="#" style="font-size: 2em"><i class="fas fa-bars"></i></a>
</header>In css there are @keyframes where it allows the creation of animations only with html and css.
The @keyframes rule By specifying CSS styles within the @ keyframes rule, the animation will gradually change from the current style to the new style at certain times.
To have an animation for work, you must link the animation to an element.
div {
width: 100px;
height: 100px;
background-color: red;
animation: changeColor 5s infinite;
}
@-webkit-keyframes changeColor {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}<div></div>