我正在尝试在悬停到网站的一些元素时引入一些动画。
我注意到它在IE 10和IE 11中看起来有点毛病,并且通过一些研究发现这些浏览器不支持transition
的CSS background-size
属性!
好的,很好,但MS也删除了那些浏览器的条件评论,所以:任何想法我如何给IE 10和IE 11一个简化的过渡(保持background-image
相同的大小)但仍然保持那些可以的完整动画?
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 and totally independent</p>
<span class="btn btn-lg btn-success">Find out more</span>
</a>
</div>
提前致谢。