Do you guys have an idea why the following CSS3 transition does not work in Opera, even though -o-transition was used? Firefox and IE 10 render the menu item correctly:
http://jsfiddle.net/JYLZ3/
You could try the following syntax instead:
-o-transition-property: background-color;
-o-transition-duration: 4s;
I just modified the fiddle and this indeed works in Opera 11.62. In fact, it appears you could just use the shorthand form, but include -color to make it work with Opera:
-o-transition: background-color 5s;
Source: http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
This is fixed in Opera 12 alpha. -o-transition: background 5s will work.
Related
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.
Live example:
http://www.script-tutorials.com/demos/298/index.html (move mouse on the blue bar on the top of page)
My problem:
This css 3d navigation menu (on the top) not work in Opera browser.
Why please? The css have this:
-o-transition: -o-transform 0.5s ease;
-o- is not opera?
Opera does not require a vendor prefix for transform, the vendor prefix -o- is only needed for transition and border-image.
Try using the normal transform as the transition property, instead of -o-transform, but keep the -o-transition: ...
-o-transition: transform 0.5s ease;
I added a fade-in effect for the logo on a web site:
#logo img {
opacity: 0;
-moz-transition: opacity 5s; /* Firefox 4 */
-webkit-transition: opacity 5s; /* Safari and Chrome */
-o-transition: opacity 5s;
transition: opacity 5s;
}
and
<div id="logo"><p><img src="img/logo.png" ... onload="this.style.opacity='1';" /></p></div>
At first view, it seems to work greatly. But on the second (third, ...) page, the logo is just displayed, it does not fade-in in IE9 or FireFox 19 or Opera 12 - only in Safari 5 and Chrome 25, the fade-in effect is available for every page.
I hardly ever do web design, and that's just a nice to have feature I stumbled upon while playing with CSS. I think it is not appropriate to start learning how to use a big library like jQuery which I would use less than once a year.
Is there a simple method to make it work with the other browsers on all pages?
Based on your comments this might work:
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
If you want support for IE you should use jQuery.
I am not quite sure how to use CSS3 transitions to do what I want. I'm new to using them so I could really use some help :)
Here is the JSFiddle with what I'm working on.
So, basically the div.portlet is supposed to be a window showing what is in the explode. WHen you click on the portlet, I want it to grow to fill up the div.container. And when you close I want it to shrink back to its normal size.
fade isnt transact property either you need to definde like fadeIn defined below you can do this by
as in your comment
try
div.portlet
{
transition: ease-out 2s;
-moz-transition: ease-out 2s; /* Firefox 4 */
-webkit-transition: ease-out 2s; /* Safari and Chrome */
-o-transition: ease-out 2s; /* Opera */
}
and add z-index:3; to div.portlet and z-index:4 to class open
and jquery
$(".container").on("click", ".portlet", function(){
$(".portlet").css("z-index","3");
$(this).addClass("open");
$(this).css("z-index","333");
});
});
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.