CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rivon
Rivon

Reputation: 37

Css3 Transition+Transform property not working in Earlier version of IE?

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.

Upvotes: 0

Views: 45

Answers (1)

Saurabh Sharma
Saurabh Sharma

Reputation: 2472

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
}

Upvotes: 1

Related Questions