Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1172369

    by the way – if you like to have the sonar effect in the same color as the icon definition is – you can redefine the existing rules.
    The trick is to use a relative color definition “currentColor”

    /*** redefine the sonarEffect with "currentColor" instead of #fff  ***/
    @-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 currentColor, 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 currentColor, 0 0 0 10px rgba(255,255,255,0.5);-webkit-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 currentColor, 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 currentColor, 0 0 0 10px rgba(255,255,255,0.5);transform: scale(1.5);opacity: 0;}
    }

    see: https://webers-testseite.de/icon-in-motion/#av_section_2

    #1172388

    Hey Guenter,
    Thank you for sharing, I also like your icon animation :)

    Best regards,
    Mike

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.