Skip to main content
adicionou 162 caracteres ao conteúdo
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

É possível sim, basta trocar o color do ícone, pois ela é uma propriedade que pode ser animada sem problemas. Como o FontAwesome é uma fonte vc deve usar o color para isso, e com o @keygrames vc faz a animação. Aqui vc pode ler mais sobre os @keyframes https://developer.mozilla.org/pt-BR/docs/Web/CSS/@keyframes

Um exemplo aplicando a técnica. inserir a descrição da imagem aqui

SeguePara simular o códigomesmo efeito que vc fez com jQuery a animação tem 4s, sendo que demora 2s para trocar a cor (50% da imagem acima:animação) e mais 2s para voltar para a cor original (outros 50% da animação). Pra entender melhor olha o código abaixo.

.fa-bars {
    color: #fff;#FAFAFA;
    animation: bg 6s4s infinite;

}
@keyframes bg {
    25% {
        color: red;
    }
    50% {
        color: blue;
    }
    75% {
        color: green;#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>

É possível sim, basta trocar o color do ícone, pois ela é uma propriedade que pode ser animada sem problemas. Como o FontAwesome é uma fonte vc deve usar o color para isso, e com o @keygrames vc faz a animação. Aqui vc pode ler mais sobre os @keyframes https://developer.mozilla.org/pt-BR/docs/Web/CSS/@keyframes

inserir a descrição da imagem aqui

Segue o código da imagem acima:

.fa-bars {
    color: #fff;
    animation: bg 6s infinite;

}
@keyframes bg {
    25% {
        color: red;
    }
    50% {
        color: blue;
    }
    75% {
        color: green;
    }
}

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>

É possível sim, basta trocar o color do ícone, pois ela é uma propriedade que pode ser animada sem problemas. Como o FontAwesome é uma fonte vc deve usar o color para isso, e com o @keygrames vc faz a animação. Aqui vc pode ler mais sobre os @keyframes https://developer.mozilla.org/pt-BR/docs/Web/CSS/@keyframes

Um exemplo aplicando a técnica. inserir a descrição da imagem aqui

Para simular o mesmo efeito que vc fez com jQuery a animação tem 4s, sendo que demora 2s para trocar a cor (50% da animação) e mais 2s para voltar para a cor original (outros 50% da animação). Pra entender melhor olha o código abaixo.

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

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

É possível sim, basta trocar o color do ícone, pois ela é uma propriedade que pode ser animada sem problemas. Como o FontAwesome é uma fonte vc deve usar o color para isso, e com o @keygrames vc faz a animação. Aqui vc pode ler mais sobre os @keyframes https://developer.mozilla.org/pt-BR/docs/Web/CSS/@keyframes

inserir a descrição da imagem aqui

Segue o código da imagem acima:

.fa-bars {
    color: #fff;
    animation: bg 6s infinite;

}
@keyframes bg {
    25% {
        color: red;
    }
    50% {
        color: blue;
    }
    75% {
        color: green;
    }
}

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>