I am trying to add a transition to the progress element using CSS, so that when the value of it changes, it will move the progress bar inside the container smoothly. What I am having trouble with is getting the transition to work at all and I have no idea where to put such a transition, as there is nothing like :hover for example when the value changes (not that I know of). So is what I am trying to do even possible and, if so, how?
Code snippet below:
progress {
display: block;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
width: 100%;
margin: 1px auto;
height: 10px;
background: yellow;
transition: all 5s ease 0; /* Does not work */
}
progress[value]::-webkit-progress-value {
background: red;
transition: all 5s ease 0; /* Does not work */
}
progress[value]::-webkit-progress-bar {
background: yellow;
transition: all 5s ease 0; /* Does not work */
}
progress[value]::-moz-progress-bar {
background: red;
transition: all 5s ease 0; /* Does not work */
}
<h3>Progress bar with transition</h3>
<progress id="test-prog" value="25" max="100"></progress>
<br>
<button onclick="document.getElementById('test-prog').setAttribute('value',parseInt(document.getElementById('test-prog').getAttribute('value'))+5);">Click me to see the progress bar value change</button>
I don't think you can give transition to the value of <progress> element.
It's being drawn via the operating system, and not via CSS (that's why it looks different in different operating systems - like the scroll bar).
If you want, you can implement your own HTML+CSS progress bar, and give it transitions.
Example: http://codepen.io/mcraiganthony/pen/waaeWO
I know this is an old question but I found a way to animate value change in chrome using
::-webkit-progress-value {
transition: width 1s;
}
Source: Animating Progress
Related
I have a component that I want to fly in on entrance and I used CSS animations with keyframes and that was pretty simple but the challenge comes in implementing exit animation. I saw frameworks like framer-motion use AnimatePresence but that's fully JavaScript.
I am interested to animate out a component based on its scale, translate and opacity property.
I believe we can have a hide class and use transition property to show or hide an element:
.Expander {
position: absolute;
top: 100%;
right: 0;
width: max-content;
padding: 0 1rem;
background-color: var(--light-background-color);
box-shadow: var(--box-shadow-thick);
text-align: end;
border-radius: 0.4rem;
animation: fly-in 0.3s linear;
transition: all 3s linear;
}
and hidden class:
.HideWithAnimation {
position: absolute;
top: -0%;
right: 0;
width: max-content;
padding: 0 1rem;
background-color: var(--light-background-color);
box-shadow: var(--box-shadow-thick);
text-align: end;
border-radius: 0.4rem;
visibility: hidden;
translate: 0 -20%;
scale: 0;
opacity: 0;
transition: all 3s linear;
}
but the problem with above approach is that although component goes invisible it doesn't let me have control like the way I had while animating, let's say I remove top or right properties it would disturb the geometry and lead to unexpected empty space behaviour like this:
And if I use display: none; instead of visibility hidden animation just won't happen at all.
I wanted to know if there's a clean way to animate exit of a component using CSS only or I have to anyway go to javascript for the same?
Note: Please don't count the JS involved in swapping the classes. (From visible to hidden)
In the most ideal scenario, I would want the class to inject with animation properties lets say:
.exitAnimationClass {animation: custom-animation 0.3s linear;} and expect to propogate the same on toggling of the class to exitAnimationClass from any incoming class.
I am not that familiar with CSS animations. My client want to achieve the following result when hovering the contact button:
so to be clear:
the square's move from left to right and vice versa
when the square moves, the line underneath it changes color
the top image it the start state, the middle is during the effect (50%) and the bottom image is the end stage.
Is this achievable with only CSS or do I need JS as well?
How would I approach this?
I created a quick and dirty JSFiddle here: https://jsfiddle.net/x0b397pb/
As you can see, it is possible with just CSS. In this example I used pseudo elements (::before and ::after) to create most of the elements.
You mentioned "Im not that familiar with CSS animations". For this I used transitions.
transition: left 1000ms, right 1000ms, box-shadow 1000ms;
Each comma separated element is a value that will transition between 2 points. This transition happens on a change of the div, this can be on a hover, but also when applying another div (Through JS).
To created the effect of the lines gradually shifting in color I used another element that slides on top of the original two lines. The new lines originally have 0 width, but on hover they gain 100% width. With a transition transition: width 1000ms; this happens gradually.
Try not to use my code as your final example, as it is somewhat ugly. But I hope it gets the point across.
Here is a small demonstration of css transition:
Consider this HTML:
<div class="container">
<div class="box"></div>
</div>
With this CSS:
.container {
position: relative;
width: 400px;
height: 400px;
border: solid 1px black;
}
.box {
position: absolute;
width: 40px;
height: 40px;
top: 10px;
left: 10px;
background-color: red;
transition: all 1s;
}
.container:hover {
border-color: blue;
.box {
top: 200px;
left: 200px;
width: 160px;
height: 160px;
background-color: blue;
}
}
Or, check it on JsFiddle: https://jsfiddle.net/ronency/75ozjq3s/
.box {
background: linear-gradient(80deg, #f3efef, #90009f, #01060d);
background-size: 600% 600%;
animation: AnimationName 29s ease infinite;
}
#keyframes AnimationName {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
Earlier today I asked Overlay a background-image with an rgba background-color. My goal is to have a div with a background-image, and when someone hovers the div, the background-image gets overlayed with an rgba color. In the answer, a solution with :after was given:
#the-div {
background-image: url('some-url');
}
#the-div:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
}
I now would like to have the same, but with a CSS transition: I'd like the background color to fade in. I tried adding transition: all 1s; to the #the-div CSS, but that didn't work. I also try to add it to #the-div:hover and #the-div:after, but that didn't work either.
Is there a pure CSS way to add a fading in overlay to a div with a background-image?
Yes, it is possible.
demo
.boo {
position: relative;
width: 20em; min-height: 10em;
background: rgba(0,0,0,0) url(http://placekitten.com/320/160);
transition: background-color 1s;
}
.boo:hover {
background-color: rgba(0,0,0,.5);
}
.boo:before {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: inherit;
content: ' ';
}
What am I doing here?
What I am doing here is that I am setting a RGBa background-color on the div, behind its background-image and transitioning this background-color (its alpha) on :hover. All this happens behind the background-image. However, I am also using background-color: inherit on the pseudo-element, which means that, at any given moment, the pseudo-element, which is situated above its parent div (and therefore above the background-image of the div) is going to have the same background-color (meaning that the background-color of the pseudo-element is going to transition from rgba(0,0,0,0) to rgba(0,0,0,.5) on :hover).
Why do it this way?
The reason why I am not transitioning directly the background-color of the pseudo-element is that support for transitions on pseudo-elements is still not that good yet.
Support for transitions on pseudo-elements
✓ Firefox supports transitions on pseudo-elements and has supported them for quite a while, let's get this out of the way first.
✗ Current versions of Safari and Opera don't support transitions on pseudo-elements.
Chrome supports transitions on pseudo-elements only starting from version 26.
IE10 supports them in a bit of a weird way, meaning that something like:
.boo:before { color: blue; transition: 1s; }
.boo:hover:before { color: red; }
won't work, you have to specify the hover state on the element itself as well. Like this:
.boo:hover {}
.boo:before { color: blue; transition: 1s; }
.boo:hover:before { color: red; }
More info and examples about how you can transition various properties of pseudo-elements using this inherit technique: http://vimeo.com/51897358
EDIT
Transitions directly on pseudo-elements are now supported in Opera since the switch to Blink and in Safari since 6.1.
Allthough #Ana technique is also nice, and works fine, allow me to slightly alter my answer to the previous question, and add the transition in that code.
http://jsfiddle.net/Pevara/N2U6B/2/
#the-div {
width: 500px;
height: 500px;
background: url(http://placekitten.com/500/500) no-repeat center center;
position: relative;
}
#the-div:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,0);
transition: background-color .5s;
}
#the-div:hover:after {
background-color: rgba(0,0,0,.5);
}
What I did is i defined the :after pseudo element on the default state of the div in stead of only on the hover state, but with a fully transparent background, and a transition on the background color. On hover of the div, I change the background color of the pseudo element to be less transparent. Thanks to the transition it fades in nicely.
The technique is basicly the same as what #Ana did, but perhaps a bit more intuitive because I don't use the background-color: inherit;. Also if the div would becomes bigger then the background image, you would not get the 'double darkness' on the edges, as demonstrated here http://codepen.io/anon/pen/cjoHr versus here http://jsfiddle.net/Pevara/N2U6B/3/
I made some CSS div buttons on an example website which are used in a sidebar navigation menu. I was just wondering how one would go about making it so that text appears only when the mouse is hovered over the button.
If there was a way to include the text (ex: "Click Here!") in the CSS under the hover part for the div only, that would work, but I don't think you can do that. If I include it in the HTML, then it shows up regardless of hover or not.
The example website is here: http://www.arthiaravind.com/nursery/
Ideally, the buttons would be blank, and then when they're hovered over, they would extend and the link would appear.
Here is the code for the first button:
.button1 {
position: fixed;
margin-top: 100px;
margin-left: 730px;
width:70px;
height:50px;
text-align:right;
padding: 0px 50px 0px 0px;
background:#75AD38;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
Here is the code for when you hover:
.button1:hover{
width:200px;
}
Any suggestions for making my code more streamlined would also be appreciated, as I currently have this code copypasted for each of the five buttons, which I know is clunky but I don't know how to make them all the same type of button but then position them individually.
I also don't know why the buttons extend when you load the page. That isn't supposed to happen.
Thank you!
To make text in a CSS button appear only on hover, you can use the CSS content property (you will have to look up cross browser support for this), use JavaScript, or change the color of the text on hover as others have suggested. Here is a JS fiddle that addresses the first two solutions:
http://jsfiddle.net/ABHgN/1/
/*<div id="button1"></div>*/
#button1{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: green;
}
#button1:hover:before{
content: "viaCSS ";
}
A possible solution is simply to set the font color to the background colour, and then change it on hover. This fiddle demonstrates it: http://jsfiddle.net/LXxG3/
In your css add a font color
.button1{
background:#75AD38;
color:#75AD38;
}
and a hover color
.button1 hover{
color:#fff;
}
As for streamlining your css, simply apply the style to the base tag, ie button, and then individual styles by class name. for example to set individual background colours for two buttons...
EDIT: changed button to .baseButton so it can be used as a base class for your button divs
/*style for all button tags */
.baseButton{
width:70px;
height:50px;
margin-top: 100px;
margin-left: 30px;
text-align:right;
padding: 0px 50px 0px 0px;
background:#75AD38;color:#75AD38;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
/*individual styles */
.button1{
background-color:#afa;
color:#afa;
}
.button2{
background-color:#faa;
color:#faa;
}
This would be used in the html as such:
<div class="baseButton button1">Your button</div>
An alternative is to use id's for individual buttons..
css
/*individual styles */
#button1{background-color:#afa;color:#afa;}
#button2{background-color:#faa;color:#faa;}
html
<div class="baseButton" id="button1">Your button</div>
You can change color of text on hover
and put it same on normal state by that it is not visible
.button1 {
position: fixed;
margin-top: 100px;
margin-left: 730px;
width:70px;
height:50px;
text-align:right;
padding: 0px 50px 0px 0px;
background:#75AD38;
color:#75AD38; // same color as background
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.button1:hover {
color:#fff ||#000 //like any suitable color
}
but it is not the right way
you can also use text-indent
or I think content:"text"; on hover like we use in :before and :after also work but I am not sure.
Note:
It is not good in terms of usability too
as the users get irritated when they have to hover every button to see what the button does.
I'd personally recommend you don't do this, as it would affect used experience. People may find it annoying to hover over each and every button when searching for content.
However if you still want to go ahead here's a working fiddle
Basically style your text like this
.button1 p {
display:none;
}
and then make it visible on hover like this
.button1:hover p {
display:inline;
}
Here is a quick example of how the text will only show on hover using css child combinator
<div>
<p>text</p>
</div>
/** CSS **/
* {
margin: 0;
padding: 0;
}
div {
width: 60px;
height: 40px;
background-color: green;
border: 1px solid #000;
}
p {
text-align: center;
color: #fff;
vertical-align: middle;
display: none;
line-height: 40px;
}
div:hover > p {
display: block;
}
jsfiddle
Use the precious CSS code;
http://jsfiddle.net/hassaan39/NheFj/
I use the text visibility hidden, on hover visibility visible. Simply the best.
I found this post How to create sliding DIV on click?
But all the answers are Jquery methods. Is there any way to create this with PURE CSS?
I have a couple other things in mind as well...
What can I add to make the slide down div stay put when scrolling
Change the link that triggers the animation to "Close" in order to make the div slide back up
Here is a link to the example in that post//
http://shutterbugtheme.tumblr.com/
I've also tried googling but the only results are jquery methods...
It can be done, although it's a little bit of a hack. The two elements that retain state (referred to in CSS as :checked) are the checkbox and radio button element. So if you associate a checkbox with a label by using a for attribute and add a div, you can get a result by reading the status of the (hidden) button:
<div class=window>
<input type=checkbox class=toggle id=punch>
<label for=punch>Punch It, Chewie<label>
<div><p>Here’s my content. Beep Boop Blurp.</p></div>
</div>
And the CSS:
input.toggle { display: none; }
input.toggle ~ div { height: 0px; margin: .2rem; overflow: hidden; }
input.toggle:checked ~ div { height: 180px; }
This is impossible in pure CSS to recognise a click. You can do it with :hover and a transition, but that is as close as you're going to get without javascript.
.hover
{
cursor: pointer;
position: relative;
z-index: 1;
}
.slide
{
position: absolute;
top: 0;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
}
.hover:hover + .slide
{
top: 50px;
}
http://jsfiddle.net/Kyle_/MaMu9/1/
Be aware though that transitions are CSS3 and will not work in IE<9 and older versions of better browsers.
Edit: after another answer was posted using the :focus property in CSS: it is possible with one caveat: you have to click outside of the element that makes it slide down to make it slide up, otherwise it works fine.
Be aware that the element must have tabindex='1' (or any number that makes sense depending on where the element is in the document) for this to work.
.hover:focus + .slide
{
top: 50px;
-webkit-transition: top 1s;
}
http://jsfiddle.net/Kyle_Sevenoaks/MaMu9/1/
You can recognize a 'focus' event on an element and act upon it using a CSS transition.
Here's an example which will move a div 50px down when clicked
Markup
<div tabindex='1' id='box'></div>
CSS
#box {
background-color:#3a6d90;
width:100px; height:100px;
transition: margin-top 2s;
-moz-transition: margin-top 2s; /* Firefox 4 */
-webkit-transition: margin-top 2s; /* Safari and Chrome */
-o-transition: margin-top 2s; /* Opera */
}
#box:focus {
margin-top:50px;
outline:0;
}
Working example: http://jsfiddle.net/NBHeJ/
This is a good example of how to get started. You can see at the bottom, they post the source for the animate function they use, although this is javascript.
sliding-js-generic
If you want pure css, I'd use ws3schools has been excellent resource for many years, though be aware that a lot depends on browser support as to whether the effect you want will work or not.
w3schools-css
Basic structure to make the effect they have, you just need to work along the lines of two divs within the body, at the top hidden and the container visible, and run the animation of the hidden div to display pushing the other div down, keeping them both inline.
<body>
<div id="hidden-div"></div>
<div id="main-content-div"></div>
</body>
This can be done using the target pseudo class to detect the click.
Set the button href to the id of the sliding div.
The slide down can then be done by setting the height of the sliding div on the slidingDiv :target class using a css3 transition on the height.
I don't think there's a way for the original button to change its href to close the sliding div using pure css, however you could always add a close button on the sliding div to close it.
This close button works by adding the same transition on the sliding div class.
Here is a WORKING DEMO.
Enjoy.
Run This Code.
input {
display: none;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px 20px;
border: 1px solid;
border-radius: 4px;
background: tomato;
color: #FFF;
font-family: arial;
-webkit-transition: background-color 0.1s, color 0.1s;
}
label:hover {
background: #blue;
color: #blue;
}
.test {
-webkit-transition: height .3s ease;
height: 0;
overflow: hidden;
width: 200px;
background: tomato;
margin-top: 10px;
color: #FFF;
}
input:checked + .test {
height: 100px;
}
<label for="check">Click me</label>
<input id="check" type="checkbox">
<div class="test">
<p>I am some hidden text</p>
</div>
Easy:
.contents {
background: yellow;
color: rgba(0, 0, 0, .8);
padding: 20px;
margin:0;
}
.slide-up, .slide-down {
overflow:hidden
}
.slide-up > div, .slide-down > div {
margin-top: -25%;
transition: margin-top 0.4s ease-in-out;
}
.slide-down > div {
margin-top: 0;
}
Working example:
https://jsfiddle.net/webarthur/3ep33h5s/
Another way to do the same thing:
.contents {
background: yellow;
color: rgba(0, 0, 0, .8);
padding: 20px;
margin:0;
}
.slide-up, .slide-down {
overflow:hidden;
}
.slide-up > div, .slide-down > div {
transform: translateY(-100%);
transition: .4s ease-in-out;
}
.slide-down > div {
transform: translateY(0);
}
Working example: https://jsfiddle.net/webarthur/3ep33h5s/1/