I created a progress bar using HTML5 .
However I am using a transition effect that only works on Chrome, Opera and Safari. But isn't it working in Firefox?
This is my progress bar -> https://codepen.io/thadeucesario/pen/KKdWKdr
Do you know how I can fix it?
For these browsers I'm using:
progress::-webkit-progress-value {
background: #0b366f;
-webkit-transition : width .5s ease;
-moz-transition : width .5s ease;
-o-transition : width .5s ease;
transition : width .5s ease;
}
Thanks!!
I solved this problem by replacing , for two .
I used the 'width' of the innermost , as if it were the progress value.
Now it worked perfectly on all browsers.
Particularly, I was unable to solve the problem with vendor prefix.
Related
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 have some logos which transition on hover but i've always tested with chrome(yeah i messed up)So I just tested it in ff & ie and it's not working (i have the latest versions)
Here is my fiddle http://jsfiddle.net/r6qZw/
and here is the html
<a id="facebook" href="http://facebook.com"></a>
and the css
#facebook {
float: left;
height: 40px;
width: 40px;
background-image: url(http://i.imgur.com/2lAKpSi.jpg);
background-repeat: no-repeat;
background-position: center center;
-o-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-khtml-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
#facebook:hover {
background-image: url(http://i.imgur.com/L7Jmol5.jpg);
}
I know the solution to this is simple but i just couldn't do it. When i remove the background image and just use a color instead, it works but using background image just stops the animation. I still get the second image but it doesn't transition with an animation. I've also tried giving a parent element (like the famous "ul li a" and such)
Can someone help a noob out?
background-image is not a transitionable property (except for gradients, and that's not supported in Chrome - IE supports it though!)
The fact that Chrome can transition the image for you is simply an extension of the standard. This is evidenced by how horrible it looks if you rapidly move your mouse over and off of it repeatedly - normal transitions are smooth in spite of this, but the image "transition" is horrible.
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;
-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.
I'm having some trouble with the CSS transition property with absolute links in the href in Chrome on my Mac.
I have
a {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a { color: #333;
a:hover { color: #c3dd11; }
and
Link fades
Link fades
<div id="header">
<nav>
Link doesn't fades
</nav>
</div>
Here's a JS fiddle: http://jsfiddle.net/bYBxC/
Any ideas why this isn't working?
I get the same thing. I couldn't work out what it was that all non-working links had in common. Reading you're question I thought "Aha!" but I've just checked and some absolute url's are showing the transitions just fine. What I have noticed though is that the absolute urls that don't have www. at the beginning don't show the transition but the ones that do, do. I notice in your example there is no www. in front of the domain name. Try adding that and see if it works. This appears to be a Chrome bug.
Edit
Just been playing around with the fiddle and both links are showing the transition regardless of the url. That wasn't the case at first. Very strange bug indeed.
Bug is fixed in the latest version of chrome.