Css3 Transition+Transform property not working in Earlier version of IE?
Question
HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/demo.css" />
</head>
<body>
<div></div>
</body>
</html>
CSS CODE:
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);
}
I'm not able to figure out that why the css3 transition and transform is not working in IE9 and earlier version . I tried -ms- , -sand- prefix also but still not working.
1 answers
solution1
1 2016-11-08 07:21:25
CSS Transitions are not supported in IE9 and below.
http://caniuse.com/#feat=css-transitions
Also, IE10 uses unprefixed transition. (so -ms-transition is of no use here)
Use Modernizr to detect if css transitions are supported, else fallback with jQuery Animate for all browsers (including IE9) that do not support CSS transitions.
if(!Modernizr.csstransitions) { // CSS ANimations Not supported.
//ADD YOUR CODE HERE
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.