Css3 Transition+Transform 属性在早期版本的 IE 中不起作用？答案

【问题标题】：Css3 Transition+Transform property not working in Earlier version of IE?Css3 Transition+Transform 属性在早期版本的 IE 中不起作用？
【发布时间】：2016-11-08 07:18:31
【问题描述】：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
      <link rel="stylesheet" href="css/demo.css" />
</head>
<body>
    <div></div>    
</body>
</html>

CSS 代码：

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    -ms-transition: width 2s, height 2s, -webkit-transform 2s; /*IE */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 300px;
    height: 300px;
    -webkit-transform: rotate(180deg); /* Safari */
    -sand-transform: rotate(180deg); /*IE9 */``
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

我无法弄清楚为什么 css3 转换和转换在 IE9 和更早版本中不起作用。我也试过 -ms- ,-sand- prefix 但还是不行。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

IE9 及以下版本不支持 CSS 过渡。

http://caniuse.com/#feat=css-transitions

此外，IE10 使用无前缀转换。（所以 -ms-transition 在这里没有用）

使用 Modernizr 检测是否支持 CSS 过渡，否则使用 jQuery Animate 回退所有不支持 CSS 过渡的浏览器（包括 IE9）。

if(!Modernizr.csstransitions) { // CSS ANimations Not supported.
//ADD YOUR CODE HERE
}

【讨论】：