html - How can I polyfill a CSS background-size transition in IE 10 - 11? -
i'm trying introduce animation on hover few elements of site.
i noticed looking bit glitchy in ie 10 , ie 11 , through bit of research found out browsers don't support css transition
property background-size
!
ok, fine, ms have removed conditional comments browsers, so: ideas how can give ie 10 , ie 11 simplified transition (keeping background-image
same size) , yet still keep full animation can?
css
.home .hero a.animate { background-image: url("/images/home/question.gif"), url("/images/home/person.gif"), url("/images/home/bulb.gif"), url("/images/home/person-m.gif"), url("/images/home/person-f.gif"); background-position: 51% 14.5em, 50% 13em, 51% 14.5em, 90% 7em, 10% 7.5em; background-size: 10% auto, 40% auto, 10% auto, 30% auto, 29% auto; } .home .hero a.animate:hover { background-image: url("/images/home/bulb.gif"), url("/images/home/person.gif"), url("/images/home/question.gif"), url("/images/home/person-m.gif"), url("/images/home/person-f.gif"); background-position: 51% 8em, 50% 12em, 51% 8em, 85% 9em, 15% 9.5em; background-size: 10% auto, 38% auto, 10% auto, 35% auto, 34% auto; }
html
<div> <a class="animate" href="#"> <h2>consultancy</h2> <p>unbiased , totally independent</p> <span class="btn btn-lg btn-success">find out more</span> </a> </div>
thanks in advance.
Comments
Post a Comment