-webkit-transition:background-image 0.6s ease-in;
-moz-transition:background-image 0.6s ease-in;
-o-transition:background-image 0.6s ease-in;
transition:background-image 0.6s ease-in;
On the above code, I've already tried safri,firefox and chrome, ONLY firefox doesn't work. I checked on the web, people say firefox is not support this, but I just want to be make sure, are there any other methods can be done in firefox, or else I have to create a javascript controlled animation just for firefox.
According to MDN, background-image transitions are not supported yet. However, you can fall back to using image sprites and animating the left property if you want sliding, or layers of images and animating the opacity property.
Related
I have an icon that, once tapped, opens a sidebar. I'm using this CSS3 transition:
transition: transform .2s ease-in-out;
The sidebar is not working on BlackBerry devices but when I visit http://tympanus.net/Development/SidebarTransitions/ these sidebars works properly on a BlackBerry device.
The only difference in the animation is that the tympanus one has not the ease-in-out rule but just transition: transform .2s;
Any suggestions or other things to check?
I am using a progress bar as described here:
http://css-tricks.com/html5-progress-element/
Using the <progress> element and styling it with the pseudo classes
-webkit-progress-bar and -webkit-progress-value.
So now I want to animate the progress-value, whenever it updates.
In my theory this should work via transitioning its CSS width attribute like this:
progress::-webkit-progress-value {
transition: 5s width;
}
But for some reason this does not seem to work.
The correct syntax for the transition property is:
transition: [property] [duration] [timing-function] [delay];
then your value ( transition: 5s width; ) is wrong, timing and property are inverted, and timing function is missing. It should be (for example):
transition : width 5s ease;
It should also be prefixed to work crossbrowser, especially for WebKit based browsers, leaving the standard property as the last one.
-webkit-transition : width 5s ease;
-moz-transition : width 5s ease;
-o-transition : width 5s ease;
transition : width 5s ease;
I'm experiencing a very annoying bug which appears in Safari 5.1 on Mac. Since this browser is still very common I need to support it.
JSFiddle: http://jsfiddle.net/QCvZt/2/
On clicking a button, a class is added to a containing element #chance. The stylesheet has rules that then cause the clicked element #chance-loose-card to animate away with transitions immediately and then, after a delay, #chance-card animates in.
They fade out and in with opacity, and I flip visibility to hidden when they're totally transparent, since in the full site they might otherwise be over top of things and capturing clicks meant for elements below.
This works very well in Firefox and Chrome (and Safari 6).
But in Safari 5.1 on Mac the first animation is happening as expected but then #chance-card isn't appearing. It's not until I hover over the #carousel element (presumably it's because it triggers another transition -- a button fading in) that #chance-card makes its appearance.
Now, given my assumption that it's to do with another transition being triggered, I tried forcing a transition to happen every second via a Javascript setInterval flipping a class on an element, causing it to transit back and forth. But this did not unfreeze the transition and make #chance-card appear. Transitioning a transform: translate instead of margin-left on the #chance-card doesn't help either.
As noted in the JSFiddle, reducing the transition-delay on #chance-card does make the bug go away, but for my use case this isn't an acceptable solution.
I wonder if anyone can suggest any workarounds? I haven't found anything which sounds similar in my searches.
I found a solution!
http://jsfiddle.net/QCvZt/4/
Changing the transition-delay of the visibility property to just less than the delays of the other properties fixes the issue. So it seems that if transitions are delayed, if visibility is hidden at the time when the transitions start (even if it's going to flip to visible at that same moment), the transitions don't start until somehow triggered (like in this case with the mouse over the grey area, though I don't know exactly the mechanism). Flipping visibility to visible just before the other transitions are due to start makes the problem disappear.
In this case I changed this (vendor prefixes omitted)
#chance.state-chancecard #chance-card {
transition: transform 0.5s, opacity 0.1s, visibility 0s;
transition-delay: 0.5s, 0.5s, 0.5s;
transition-timing-function: ease-out;
transform: none;
opacity: 1;
visibility: visible;
}
to this
#chance.state-chancecard #chance-card {
transition: transform 0.5s, opacity 0.1s, visibility 0s;
transition-delay: 0.5s, 0.5s, 0.49s; /* flip visibility just before other transitions are to start */
transition-timing-function: ease-out;
transform: none;
opacity: 1;
visibility: visible;
}
Hover over each ribbon and the svg will change colour. All seems good :)
http://codepen.io/anon/pen/qEILH
But, only the first ribbon gives the right result, the others seem to have a delay before the colour transition occurs and the ONLY difference between them are the values of href.
Why is this???
This seems only to be a problem on Chrome.
Are you talking about the transition from grey to white? Which version of IE are you using?
Try changing the .ico svg selector to: (delete the additional transition-duration, or set it to 0s)
.ico svg {
position: relative;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0s;
fill:inherit;
}
I think it might have something to do with your other browsers not understanding transition-duration. But Chrome does, so it adds an additional 0.3s resulting in the delay.
I am working on a Drop-Down-Menu only using CSS & HTML5 (no JavaScript) in my personal website. Here it is: http://davidvalles.cu.cc
If you enter with Firefox, the menu works great (it is the one called "Secciones"): when you put the mouse over the "Secciones" div, the menu appears with a transition.
But if you try it with Safari or Chrome, it will work normally, unless you put the mouse UNDER the "Secciones" div. In that case, menu will appear normally. And I don't want the menu to open in that case. I only want it to open when you put the mouse over the "Secciones" link (all the box that contains the Secciones text).
What am I doing wrong? Why does the menu work perfectly in Firefox but not in Safari?
Could you take a look at it? Thank you, and sorry for my poor English, I'm learning. Please, correct me :)
Your easing? Is "ease" a easing value?
-moz-transition: opacity .25s ease;
-webkit-transition: opacity .25s ease;
-o-transition: opacity .25s ease;
-ms-transition: opacity .25s ease;
transition: opacity .25s ease;