Are there any tool/website where we can get the equivalent property in Mozilla of given Webkit CSS property?
For example:
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#869ab3));
euavalent to
background:-moz-repeating-linear-gradient(white, #869ab3);
and many more properties like
-webkit-appearance
-webkit-border-radius
or to know that there is not any equivalent property regarding some Webkit CSS, like
-webkit-transition:height 0.5s ease-in, padding-top 0.5s ease-in, padding-bottom 0.5s ease-in;
-webkit-transition-delay:0.5s;
I also want to know the Mozilla equivalent of this property:
background:-webkit-gradient(linear,left bottom,left top,color-stop(0.2, rgb(51,49,51)),color-stop(1, rgb(156,156,156)));
For most CSS3 properties:
http://css3generator.com/
For gradients:
http://www.colorzilla.com/gradient-editor/
Another good CSS3 generator:
http://css3please.com/
For #font-face:
http://www.fontsquirrel.com/
Or, look it up here to see the differences, in the "Browser compatibility" table:
https://developer.mozilla.org/en/CSS/-moz-linear-gradient
If it isn't in MDC, Google it.
You can use the Ultimate CSS generator To get the cross browser gradient written for you.
And you can use this webpage to see the differences between the vendor specific selectors.
Related
Why opacity is not mentioned within CSS properties?
div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
The link you provided was for css2 opacity was not added until 3.0.
For full support, browser prefixes/filters would be needed for older versions
You can find the specs here for css3 opacity
That transition thing works in Chrome but does not work IE 10. Though it supports CSS3, why doesn't it work?
.box {
-webkit-transition:background-color 0.2s linear;
background-color:#EBEBEB;
}
.box:hover {
background-color:#7bae31;
}
IE10 should support CSS3 transitions without the need for a vendor prefix. Drop the -webkit- part of your css, so that it just reads:
transition:background-color 0.2s linear;
You can see it working at:
http://jsfiddle.net/CnYtu/2/
For future reference, you can check IE CSS3 compatibility at:
http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx
I have this issue with a DIV being rotated with CSS3 transforms using a 1s transition:
In Chrome 23 & Safari 6 on OSX 10.7.5 the font in the other containers gets slightly dimmed, during the .rotate-divs transition.
Any ideas on what causes this and how to avoid it?
http://jsfiddle.net/tTa5r/
.rotate{
background: green;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.rotate.flip{
-moz-transform: rotate(540deg);
-webkit-transform: rotate(540deg);
-o-transform: rotate(540deg);
transform: rotate(540deg);
}
the flip class is added/removed using jquery:
$('.rotate').on('click', function(){
$(this).toggleClass('flip');
});
-webkit-backface-visibility: hidden;
also worked for me... adding it to the elements I have transform on
p.s. I would vote the previous answer up but I cant as I dont have enough "reputation", nor can I see how to comment on it
adding
-webkit-backface-visibility: hidden;
to all affected elements, seems to help with that issue: http://jsfiddle.net/tTa5r/2/
while i'm not sure what this property excatly does
it seems to do something to the font rendering:
http://jsfiddle.net/tTa5r/ vs http://jsfiddle.net/tTa5r/2/
...not sure if i dislike that, though.
found here: iPhone WebKit CSS animations cause flicker
The backface-visibility property determines if the element should be visible or not when it's faced away from the screen, commonly used when you "flip" and element.
In this case, it seems that it has the same effect as when you add:
-webkit-transform: translate3d(0,0,0);
Demo - http://jsfiddle.net/tTa5r/4/
which forces hardware acceleration giving you a slightly thinner (anti-aliased), but a more consistent font rendering before and after the transition.
There is a third option as well, and that is to add:
-webkit-font-smoothing: antialiased;
Demo - http://jsfiddle.net/tTa5r/3/
I answered a similar question before and #mddw posted a comment linking to a blog post that describes the methods of antialiasing which seems to be the reason for why you see a differens during and after the transition.
http://cantina.co/2012/05/18/little-details-subpixel-vs-greyscale-antialiasing/
Hope that helps!
I am trying to make some kind of animation and I want it to happen without :hover :active or any other event. I want it to happen after 2 second page loads. In fact, I want the object come from invisible place to scene (visible area). Is there anyway of doing it ?
#scene {width:650px;height:300px;border:1px solid black;background-color:#FAFAFA;margin:0 auto;}
#sca {transition: background 2s;width:271px;height:180px;background: url(http://img521.imageshack.us/img521/7913/123hc.png) no-repeat;display:block;position:relative;right:300px; opacity:0.5;
transition: opacity 2s;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s; /* Opera */
transition-delay: 2s;
-webkit-transition-delay: 2s;
}
#sca:hover {opacity:1; }
Yes it's possible, but it's not recommended. How to do it with pure CSS is shown at this site. Here is the demo provided at the site.
A more cross-compatible way of doing it would be using javascript or jQuery, specifically jQuery's ready combined with animation or more generally, effects.
Good luck!
CSS transitions work on events, and there's not any way around that. You'd have to use Javascript to do what you are looking for.
There is difference between transition (from title) and animation (from text). animation can have start without an event, but transition can't.
I am using CSS3 transitions on my site and the -webkit- seems to be working, whilst the -moz- is not.
Here is the CSS:
article {z-index: 2; float: left; overflow: hidden; position: relative; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; }
.mousedown{-webkit-transform: translate(-180px, 0) !important; -moz-transform: translate(-180px, 0) !important; }
Just using jQuery to add the mousedown class onto the article.
Any idea where I am going wrong?
Firefox 4 and above supports -moz-transition. See the documentation page.
Currently, transitions aren't supported on CSS transforms in Mozilla.
https://developer.mozilla.org/en/CSS/CSS_transitions
Support for -moz-transition has been added in Gecko 1.9.3 (Firefox 3.7), so right now -moz-transition will only work in a Firefox 3.7 alpha release or Minefield (Firefox nightly build).
UPDATE: see comments. Support for -moz-transition has now been added. Yay!
There is no such thing as -moz-transition (yet), sorry. Mozilla will do transforms, but webkit is still the only engine rendering transitions.
opera is supporting it since 10.5, and much better than webkit
CSS transitions, provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.