Hello, I'm trying to animate this "face" here:
fa fa-angle-double-down
Many users do not realize that I want it to be clicked to collapse more infos.
If it was another guy, I would do it like this:
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
Here's a simple example using @keyframes you can read more about animation with CSS in this Mozilla documentation
See the example:
ul li {
list-style: none;
position: relative;
}
.fa.icone {
font-size: 30px;
color: red;
opacity: 0;
animation: anima 1s ease infinite;
position: absolute;
left: -1.5rem;
top: -0.5rem;
}
@keyframes anima {
to {
opacity: 1;
top: 0.1rem;
}
} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
<li><i class="fa fa-angle-double-down icone"></i> as bullets</li>
</ul>