Internet Explorer 10 - CSS3 transition not working - css

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

Related

Safari bug using CSS transition-delay and CSS filters

I'm having an issue with CSS transition-delay not working correctly in Safari when used to transition CSS filters. It works fine in Chrome but in Safari the animation happens then happens again after the delay time has elapsed.
Anyone else seen this before or found a workaround?
Thanks in advance.
https://codepen.io/selfctrl/pen/GRRZeWe
.gray-dog {
filter: grayscale(0);
transition: filter 0.5s ease-in-out;
transition-delay: 1s;
}
.gray-dog:hover {
filter: grayscale(100%);
}

Applying a filter transition for Chrome and an opacity transition for Firefox and IE

I have the following CSS:
[data-state='not-ready'] .foo {
-webkit-filter: opacity(0%);
}
[data-state='transitioning'] .foo {
-webkit-filter: opacity(100%);
transition: -webkit-filter 100ms ease-in;
}
But Firefox and IE do not support filter.
I want to apply a straightforward opacity transition for Firefox and IE, while still using a filter transition for Chrome.
How can I do this?

css transitions not working in safari

If you look at my page http://debourg-dev.ch/crea/ you will see the transition effects on my links don't work in safari (tested on latest version on mac). My code is the following:
a {
color: inherit;
text-decoration: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
What is the problem?
It seems Safari has a bug and chokes on transition: all; (or just transition: Xs; because 'all' is the default property). It even crashes some versions of desktop and iOS Safari.
SOLUTION: Change it to transition: color 0.5s ease-in-out;
(Or, of course any other property, just make sure it's not 'all'.)
It could also be a problem specifically with the transition being applied globally to anchor tags - read more here
More about Safari crashing
And here
The transition appears to be working for me when running OSX 10.9.1 and Safari 7.0.1. If I had to guess, the issue is likely due to cacheing. Try clearing your cache and see if the problem persists.
For Safari try the following:
-webkit-transition: 190ms width linear;
where width represents the property being changed, prevent use of all as different browsers interpret this differently and can cause issues especially in Safari browser.

Is there way to start transition without an event

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.

-webkit- vs -moz-transition

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.

Resources