Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #647061

    Hello,

    how i can animate the font awesome icons? You have this nice animated icons on your Demo Home v11. (http://kriesi.at/themes/enfold/homepage/transparent-header/) at the section with the 5 icons. They will give an animation on mouse over.

    Thanks much, Kai

    #647566

    Hey Kai!

    Please add Icon element to your page and choose to display it as “Standalone Icon with border and optional caption” and have it linked – http://i.imgur.com/vb3OnRw.png

    Cheers!
    Yigit

    #648127

    Hello,

    the icon animation will not work for me :-(

    Look at sample please.


    Best regards,
    Kai

    #648132

    Hi,

    It does work but sonar effect is white, that is why it is not visible on white background :)

    Best regards,
    Yigit

    #648252

    Hello,

    fine :-) Where to change color of the sonar effect?

    Thanks much, Kai

    #648267

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @-webkit-keyframes sonarEffect {
    0% {opacity: 0.3;}
    40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);}
    100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);-webkit-transform: scale(1.5);opacity: 0;}
    }
    @-moz-keyframes sonarEffect {
    0% {opacity: 0.3;}
    40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);}
    100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);-moz-transform: scale(1.5);opacity: 0;}
    }
    @keyframes sonarEffect {
    0% {opacity: 0.3;}
    40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);}
    100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);transform: scale(1.5);opacity: 0;}
    }
    

    255,255,255 is RGB value of the color, change it as needed :)

    Best regards,
    Yigit

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.