I tried using transition on Firefox 15 and it didn't work even though it worked on other versions of Firefox and other browsers like Chrome and Safari.
When I view the properties using Firefox's inspector the transition is struck through and gives an error of "Invalid property value". MDN and caniuse say it's supported on Firefox 4 and above!
#mydiv {
transition: width 1s; /* Did I do this wrong? */
background: #f00;
width: 100px; height: 100px;
}
#mydiv:hover { width: 200px }
How come sometimes properties like transition and animation work in some browsers and are invalid in others?
Disclaimer: This is the canonical duplicate for all questions solvable completely by adding vendor prefixes. Stack Overflow questions should not be this broad unless discussed on meta and a canonical answer created thereafter like this one was.
Though it is not always the case, one of the most common reasons why a property like transition or animation works on some browsers and not others is because of vendor prefixes.
What are vendor prefixes?
At the time version 4 of Firefox was introduced, the CSS transition module specification was a Working Draft. Before a spec is finalized (in practice, this is when it reaches Candidate Recommendation), browser vendors add vendor prefixes to properties, values, and #-rules to prevent compatibility problems in case the spec changes.
Vendor prefixes are exactly what their name describes - a vendor-specific (vendor meaning a company who develops a browser) prefix of a property or value. They are often implemented in a specific way for each browser because the property or value is still in one of the many experimental phases before the Candidate Recommendation stage, which is the stage where they are considered implementation-ready.
The most common ones are -moz- (Mozilla Firefox), -webkit- (Chrome, Safari, etc.), and -ms- (Microsoft Internet Explorer), but there are more.
When do I need to use them?
That depends completely on what browsers you're looking to serve, what properties and values you're using, and at what point in time you are developing your website. There are sites that try to keep a current list but they are not always accurate or kept up-to-date.
Following are some of the most commonly prefixed properties and values. If your project does not supporting the browsers mentioned in the comment to the right of the property, then there is no need to include it in your CSS.
Transitions
An unprefixed property sometimes has prefixed equivalents, such as -webkit-transition.
In order to get full possible browser support, the following is necessary:
.foo {
-webkit-transition: <transition shorthand value>; /* Safari 3.1-6, Chrome 1-25, Old Android browser, Old Mobile Safari, Blackberry browser */
-moz-transition: <transition shorthand value>; /* Firefox 4-15 */
-o-transition: <transition shorthand value>; /* Old opera */
transition: <transition shorthand value>; /* Modern browsers */
}
Note that an -ms- prefix exists for transition, however it was only implemented by pre-release versions of IE10 which are no longer functional, and it is therefore never needed. It is implemented unprefixed in IE10 RTM and newer.
Transforms
.foo {
-webkit-transform: <transform-list>; /* Chrome 21-35, Safari, iOS Safari, Opera 22, many mobile browsers */
-ms-transform: <transform-list>; /* IE9 */
transform: <transform-list>;
}
Animations
Animations need to have the property prefixed and the corresponding keyframes prefixed, like so:
.foo {
-webkit-animation: bar; /* Safari 4+ */
-moz-animation: bar; /* Fx 5+ */
-o-animation: bar; /* Opera 12+ */
animation: bar; /* IE 10+, Fx 16+ */
}
#-webkit-keyframes bar { /* Keyframes syntax */ }
#-moz-keyframes bar { /* Keyframes syntax */ }
#-o-keyframes bar { /* Keyframes syntax */ }
#keyframes bar { /* Keyframes syntax */ }
Flexbox
Values can also be prefixed, as in the case of flexbox. Note: For maximum browser compatibility, flexbox-specific properties like ordinal-group, flex-flow, flex-direction, order, box-orient, etc. need to be prefixed in some browsers in addition to the following:
.foo {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: <flex shorthand value>;
-moz-box-flex: <flex shorthand value>;
-webkit-flex: <flex shorthand value>;
-ms-flex: <flex shorthand value>;
flex: <flex shorthand value>;
}
Calc
.foo {
width: -webkit-calc(<mathematical expression>); /* Chrome 21, Safari 6, Blackberry browser */
width: -moz-calc(<mathematical expression>); /* Firefox <16 */
width: calc(<mathematical expression>); /* Modern browsers */
}
Gradients
See CSS Gradients on CSS-Tricks for more information.
.foo {
background-color: <color>; /* Fallback (could use .jpg/.png alternatively) */
background-image: url(bar.svg); /* SVG fallback for IE 9 (could be data URI, or could use filter) */
background-image: -webkit-gradient(linear, left top, right top, from(<color-stop>), to(<color-stop>)); /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
background-image: -webkit-linear-gradient(left, <color-stop>, <color-stop>); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
background-image: -moz-linear-gradient(left, <color-stop>, <color-stop>); /* Firefox 3.6 - 15 */
background-image: -o-linear-gradient(left, <color-stop>, <color-stop>); /* Opera 11.1 - 12 */
background-image: linear-gradient(to right, <color-stop>, <color-stop>); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
}
Note that left and to right represent the same direction, left-to-right, and therefore left and to left point opposite ways. See this answer for some background info.
Border-radius (Not needed in most cases)
.foo {
-webkit-border-radius: <length | percentage>; /* or iOS 3.2 */
-moz-border-radius: <length | percentage>; /* Firefox 3.6 and lower */
border-radius: <length | percentage>;
}
Box shadow (Not needed in most cases)
.foo {
-webkit-box-shadow: <box-shadow shorthand value>; /* iOS 4.3 and Safari 5.0 */
-moz-box-shadow: <box-shadow shorthand value>; /* Firefox 3.6 and lower */
box-shadow: <box-shadow shorthand value>;
}
How can they be implemented with JavaScript?
To access prefixed attributes and events in JavaScript, use the camelCase equivalent of the CSS prefix. This is true for event listeners like foo.addEventListener('webkitAnimationIteration', bar ) as well (foo being a DOM object, like document.getElementsById('foo')).
foo.style.webkitAnimation = '<animation shorthand value>';
foo.style.mozAnimation = '<animation shorthand value>';
foo.style.oAnimation = '<animation shorthand value>';
Prefixing tools
Online prefixers can be helpful but are not always reliable. Always make sure to test your project on the devices you wish to support to make sure that each has the appropriate prefix included.
CSS Pre-processor functions:
SASS & SCSS properties prefixer
LESS properties prefixer
JavaScript prefixer functions:
-prefix-free for CSS properties and values
Event prefixer
See also: Why do browsers create vendor prefixes for CSS properties?
i need to rotate image in css for ie6
is it possile
i tried Below code But none of Below is working
.image-box
{
-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */
-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */
ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE8 */
-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE8 */
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-sand-transform: <rotate(180deg)>;
}
please help!!!
You're not supposed to have a hyphen before non vendor specific CSS properties. Remove the hyphen from -filter: ...:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */
Additionally, you might need to trigger hasLayout by adding overflow:auto or zoom:1 to your CSS. Here is a demonstration (I've tested this in IE7 using browserlabs).
IE6 has limited support, even from MS. You probably should use IE conditional comments to provide a different image or markup for IE6. Here's the MSDN article on these http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
I'm trying to create a sideways tab set against the side of the browser window - something like this:
The relevant css code so far:
left: -29px;
transform: rotate(-270deg);
-ms-transform: rotate(-270deg); /* IE 9 */
-webkit-transform: rotate(-270deg); /* Safari and Chrome */
-o-transform: rotate(-270deg); /* Opera */
-moz-transform: rotate(-270deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* for earlier versions of IE */
This works perfectly for Firefox, Chrome, and IE9 - for previous versions of IE, though, the tab doesn't show up. The problem seems to be the left: -29px; code; if I set it to 0 it looks correct in IE8 and earlier, but not in IE9, Firefox, or Chrome.
What's the best way to handle this?
As an interim hack, you could add an IE version conditional stylesheet that overrides the left property to 0:
<!--[if lt IE 9]>
<style>
#myElement {
left: 0px;
}
</style>
<![endif]-->
The problem here is probably that the origin about which the rotation occurs is not the same. I'll see if I can find anything on specifying the origin for the transform.
Hi am using css transform in scale property my code is like this
-webkit-transform: scale(1.05); /* Safari and Chrome */
-moz-transform: scale(1.05); /* Firefox */
-o-transform: scale(1.05); /* Opera */
-ms-transform: scale(1.05); /* IE 9 */
transform: scale(1.05);
Here not supported in ie7 letyou known the answer please reply me ASAP.
I'm not sure I understand your question. CSS transforms are not supported in IE8 or older, where you have to have to use an IE matrix filter in order to achieve the same effect (scale or rotate).
Like this (code for IE8 and older, check it live with IE8 or older at http://jsfiddle.net/thebabydino/5XdSy/ ):
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1.05,
M12=0,
M21=0,
M22=1.05,
SizingMethod='auto expand');
Also, your code is CSS and you've put it between div tags.
Older IE browsers don't support CSS transformations. Try using a polyfill like Transformie.
I have a page that houses an asp GridView and I would like to display the text vertically to allow it to print better. Currently I'm using css to do that:
.rotate { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); width: 25px; }
Which works in FF except the 25px width is ignored and in IE the width is being set correctly but the text isn't vertical. Anyone know how to make this work in both browsers?
Here's a -90 degree rotation using CSS that should work in IE:
.box_rotate {
-moz-transform: rotate(-90deg); /* FF3.5+ */
-o-transform: rotate(-90deg); /* Opera 10.5 */
-webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
zoom: 1;
}
For your reference http://css3please.com/ is a good tool for generating these kind of CSS effect with pretty good cross browser support.
I can't really say why the width isn't applying in FF without a concrete example, but you might try setting display:block;