CSS3 过渡的后备

Question

我有一个 CSS3 过渡，可以在悬停时在 div 内调整图像大小/位置。

FIDDLE

这可以按预期工作，但我担心don't support CSS3 transitions 像IE9-这样的浏览器。是否有可能编写此 CSS 代码以便这些浏览器具有后备功能？

理想情况下，后备应该显示图像，使其适合 div 并且不缩放 (fiddle example) 并且悬停时没有动画。

我更喜欢纯 CSS 解决方案，而不是更改标记。

完整代码示例：

HTML：

<div><img src="http://lorempixel.com/output/people-q-c-1000-500-7.jpg" />

CSS：

div{
    overflow:hidden; 
    width:500px; 
    height:250px;
    position:relative;
}
img{
    display:block;
    position:absolute;
    height:auto;
    width:200%;
    left:-30%;
    top:-60%;

    -webkit-transition-property: width, left, top;
    -webkit-transition-duration: .8s;
    -webkit-transition-timing-function: ease-out;
    transition-property: width, left, top;
    transition-duration: .8s;
    transition-timing-function: ease-out;
}
div:hover img{
    width:100%;
    top:0;
    left:0;
}

Answer 1

别骗自己了，我们说的浏览器只有IE9，那就去添加吧：

width: 200%\9;
left: -30%\9;
top: -60%\9;

IE9 会使用它。我们只能希望在 2017 年不再需要 CSS hack。

Answer 2

一般来说，CSS 过渡（实际上是大多数 CSS）在设计时考虑了渐进增强。不理解转换的浏览器的预期回退很简单，就是忽略转换属性本身。这允许样式更改仍然发生，只是立即发生而不是平滑过渡（正如名称所暗示的那样），并且不需要复杂的解决方法。

但是，您要做的是根本不发生任何状态变化；您希望将图像固定在未缩放状态。这将需要更多的工作。

如果 @supports 在一开始就已经实现，你可以轻松侥幸逃脱

img{
    display:block;
    position:absolute;
    height:auto;
    width:100%;
    top:0;
    left:0;

    -webkit-transition-property: width, left, top;
    -webkit-transition-duration: .8s;
    -webkit-transition-timing-function: ease-out;
    transition-property: width, left, top;
    transition-duration: .8s;
    transition-timing-function: ease-out;
}

@supports (-webkit-transition-property: all) or (transition-property: all) {
    div:not(:hover) img{
        width:200%;
        left:-30%;
        top:-60%;
    }
}

但是，当然，并非所有事情都是这样运作的。 @supports 这么晚才提出来，而实现仍然还没有流行起来，真是太可惜了。但我离题了。

查看 caniuse.com 上的支持表，基于 Gecko 和 WebKit/Blink 的浏览器似乎覆盖得非常好（可能除了 Firefox 3.6 和更早版本），这让我松了一口气，因为我想不出任何纯基于 CSS 的解决方案来迎合这些引擎（除了丑陋的 hack）。

对于其他浏览器，我可以看到一些其他解决方法：

• 如果您关心 Presto Opera，可能值得包含 -o- 前缀。

• 如果您关心 Firefox -moz-。

• 对于 IE，只需将 div:not(:hover) img 规则隐藏在条件 cmets 中就足够了，因为支持转换和忽略条件语句的 IE 的第一个版本恰好是相同的 - 版本 10：

  <!--[if !IE]><!-->
  <style>
  div:not(:hover) img{
      width:200%;
      left:-30%;
      top:-60%;
  }
  </style>
  <!--<![endif]-->
  

  注意这里使用了div:not(:hover)，类似于上面假设的@supports 示例。您需要将声明与您的 img 规则相应地交换。

Answer 3

您可以使用Modernizr 或通过javascript 特征检测路线。

这里详细介绍了这两种方式： Detect support for transition with JavaScript