如何在IE 10 - 11中填充CSS背景大小的过渡?

时间:2014-03-21 14:05:28

标签: html css internet-explorer

我正在尝试在悬停到网站的一些元素时引入一些动画。

我注意到它在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>

提前致谢。

0 个答案:

没有答案