为CSS3过渡后退

Question

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

小提琴

这工作如预期的，但我担心的是浏览器不支持CSS3的过渡，如IE9-。是否有可能编写这个CSS代码，以便这些浏览器有一个回退?

理想情况下，回退应该显示图像，使其适合div而不是缩放(小提琴示例)，并且没有悬浮动画。

我更喜欢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

你可以使用Modernizr或者通过javascript特性检测路径。

两种方式的详细说明如下:检测JavaScript对转换的支持

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-前缀。

• 同样的-moz-如果你关心Firefox <16 .

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

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

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

Answer 3

让我们不要欺骗自己，我们唯一谈论的浏览器是IE9，所以直接添加:

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

和IE9将使用它。我们只希望在2017年不再需要CSS技巧。