Keep changing font color with CSS only

Asked

Viewed 851 times

3

I have this link that shows/hides the menu of the site, I want to draw the attention of the users for it changing the color of the font, it is 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>

css css3 css-transitions

2 answers

5


It is possible yes, just change the color icon, because it is a property that can be animated without problems. As the Fontawesome is a source you should use the color for this, and with the @keygrames you make the animation. Here you can read more about the @keyframes https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

An example applying the technique. inserir a descrição da imagem aqui

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

  • 1

    Brother, well could you post about technology on twitter or on a heim blog? I think you have a lot of content to post...

  • 1

    @Laérciolopes thanks friend thanks for the words, this is what motivates us to continue collaborating. I even feel like doing a Youtube channel, not because I have too much content, but so I can spend some of what I see in English that I know there are people who do not have such easy access to this content in Portuguese... It was worth the force [s]

  • 1

    Thank you, we’re together!

  • My friend! Do you know how to resolve this situation? https://answall.com/questions/422999/addir-toast-bootstrap-stacked-por-jquery

  • @Laérciolopes JS guy is not really my specialty, I think I won’t be able to help you... But there in your question, try to assemble a minimum example that to execute your problem, type the minimum code enough to make Toaster appear etc

  • 1

    Sorry to bother you, man, I did some more tests here!

  • Thanks anyway!

Show 2 more comments

1

in the css there are the @keyframes where you can create 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 the 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>

source: https://www.w3schools.com/css/css3_animations.asp

Browser other questions tagged css css3 css-transitions

You are not signed in. Login or sign up in order to post.