Animate fa fa-Angle-double-down

Asked

Viewed 107 times

2

Hello, I’m trying to cheer up this "guy" here:

fa fa-angle-double-down

because, many users don’t realize that I want it to be clicked to collapse more Infos.

If it were any other guy, I’d do it like this:

<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li> 
  • You that he fishing or what?

  • my idea is that it gets "kind of excited pointing down non-stop", ie indicating that the person needs to click it to see more hints.

  • Young just for the record I gave an update on the answer code, now it’s pointing down nonstop, I think it might be closer than you wanted.

  • Oops. Thank you. I’ll test.

1 answer

3


Dude here’s a simple example using @keyframes you can read more about animation with CSS in this mozilla documentation

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

  • 1

    exact, meets the need. Thank you for the answer. I struggled in this search but had not found this solution.

  • cool that served you. within @keyframes vc can customize all the css of your animation. It’s worth taking a look at the documentation link!

  • I will see. waleu.

  • @Daniel If my answer helped you in any way consider marking it as Accept, in this icon below the arrows on the left side of my answer :) so the site does not get open questions pending without answer accepted.

  • sure, sure. I’ve done.

  • @Daniel was worth my young man! Any other doubt is just talk, tmj!

Show 1 more comment

Browser other questions tagged

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