Animated Icons

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

Hi,

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

Best regards,
Yigit

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