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;
Related
I got a problem, I made a check mark CSS animation on my website, but they start on page load, and it shouldn't, it should only trigger on hovering / unhovering.
And the text need to collapse like (...) when the price goes above the description
All the code is available here: https://github.com/Douwdy/Projet-3
And you can get a preview here: https://douwdy.github.io/Projet-3/menu-1.html
Someone can help me to fix that ?
No Js Suggestion please
For CSS animations on page load your, I had a look at this and I would use transition & transform instead of animation
So if you remove the animations (check-box__in & check-box__out) in your css and replace with transitions below:
.menu-selector-box:hover .menu-selector-box__validator {
transition: transform 1s ease-out;
transform: translateX(-60px);
}
.menu-selector-box__validator {
transition: transform 1s ease-out;
}
.menu-selector-box-text__price {
transition: transform 1s ease-out;
}
.menu-selector-box:hover .menu-selector-box-text__price {
transition: transform 1s ease-out;
transform: translateX(-60px);
}
For the text issue I would suggest setting a width on menu-selector-box-text (I used 275px) and then on hover reduce the width (I used 225px), you can use the same transitions as above when reducing the width (transition: width 1s ease-out;)
Then the styles below need to be applied to the <h5> and the <p> tags.
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
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.
I want show div result when i clicked the asp button with css3 with slow motion please any one can help me.
<div id="showdivslowly" runat="server" style="width:500px; height:200px; background-color:Blue ;display:none" >Welcome</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
This will almost certainly be best done client side through an Ajax call to the server to fetch the result and append it to a hidden div which you animate either using CSS transitions or by using the jQuery animation methods like fadeIn. As the CSS display property is not animatable using CSS transitions, you would either need to use the opacity property (which will not be fully supported cross-browser, albeit probably sufficiently supported for most purposes and only the animation would be affected rather than the core functionality) or by using the jQuery methods.
If you handle the click event on the server side then the browser will complete a full page-postback, you can append the div using your server side code, and then use either a CSS3 transition or JavaScript to complete the animation client side.
For a code sample-
.result {
-moz-transition: opacity 500ms ease-in-out 0s;
-o-transition: opacity 500ms ease-in-out 0s;
-webkit-transition: opacity 500ms ease-in-out 0s;
transition: opacity 500ms ease-in-out 0s; }
.result.hidden {
display: none;
opacity: 0;
}
.result.shown {
display: block;
opacity: 1;
}
It's pretty easy to enable CSS transitions for a single style, but is it possible to disable them for a single style?
The usual method for single-style transitions is:
div
{
transition: opacity 0.5s;
}
but what I'd like to do is set a global transition, then disable it for a single property. Maybe something like this?
div
{
transition: 0.5s opacity 0s;
}
Is that possible in any way?
EDIT
I don't want to disable ALL transitions for an element, I want to disable ONE transition for an element. i.e. I want all properties to transition EXCEPT opacity.
Here's a fiddle to demonstrate: http://jsfiddle.net/jakelauer/QSJXV/
It seems that you can emulate the needed behavior by setting a very short transition-duration for that one property (see fiddle):
transition: all 3s ease, background-color .01s linear;
I solved this. Example here: http://jsfiddle.net/jakelauer/QSJXV/1/
It works exactly how I thought it should, except I was missing a comma. Correct code example:
transition: 0.5s, opacity 0s;
-webkit-transition: 0.5s, opacity 0s;
You could use the :not pseudo-selector to exclude those elements which you mark with a class that shouldn't have the transition.
div {
opacity: 1.0;
...
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
// Change state for example
div:hover:not(.disable-transition) {
opacity: 0.5;
}
.disable-transition {
// Manually maintain the opacity so there is no change
opacity: 1.0;
}
-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.