I’m using the below code to remove the animation and hover from icons, which seems to be working on FF/Chrome, but not Safari. Any idea how to target that element in Safari, or do you have a suggestion for code that can target all the browsers to remove the hover and animation? Ideally, the icon images just build at full size with no scaling at the same time as other UI elements. Thanks!
.avia_transform .avia_start_delayed_animation.av_font_icon {
animation: none;
}
.av_font_icon.av-icon-style-border a.av-icon-char:hover:after {
animation: none;
}
Hey newpappa!
Safari needs a -webkit infront of it.
Please take a look here
http://stackoverflow.com/questions/9211261/css3-animation-not-working-in-safari
in discuss most of the informations available and it is a good reading also.
Thank u
Regards,
Basilis
Hm I tried that but it failed.
Here’s the code I’m using:
-webkit .avia_transform .avia_start_delayed_animation.av_font_icon {
animation: none;
}
-webkit .av_font_icon.av-icon-style-border a.av-icon-char:hover:after {
animation: none;
}
I also tried it without the space between -webkit and .av…..
I read the linked article but still not seeing how to do it :(
Ah! Found it! The -webkit goes in front of the property not the selector, so now I have the following which works! You can close this. Thanks!
/*adjusts map icons in safari
*/
.avia_transform .avia_start_delayed_animation.av_font_icon {
-webkit-animation: none;
}
.av_font_icon.av-icon-style-border a.av-icon-char:hover:after {
-webkit-animation: none;
}
Hi,
Glad you found it! To know more about enfold features please check – http://kriesi.at/documentation/enfold/
Thank you for using Enfold :)
Best regards,
Vinay