This is nice, almost all css3 features works great on firefox and now I found this animation and is not working on firefox ? on chrome or safari works great ? cand someone explain me why ?
ty.
ul.curent_buser{
background:#fff !important;
position: absolute;
top: 100%;
left: 0;
background: transparent;
border-top: 1px solid #eaeaea;
list-style: none;
margin-top: 15px;
border: 1px solid #ccc;
width: 100%;
border-radius: 7px;
-webkit-animation: trans 0.3s;
-moz-animation: trans 0.3s;
-ms-animation: trans 0.3s;
-o-animation: trans 0.3s;
animation: trans 0.3s;
}
#keyframes trans {from {margin-top: 15px;} to {margin-top: 25px;}}
#-moz-keyframes trans { from {margin-top: 15px;} to {margin-top: 25px;}}
#-webkit-keyframes trans {from {margin-top: 15px;} to {margin-top: 25px;}}
FIDDLE
I'd say you've got a few problems besides the one you mentioned.
In the html in your fiddle, you had <a class="arrUp"></a> right inside the <ul>. The only child element type that can be inside the <ul> is<li>. Changing this screwed up the arrow look, but I'm sure you can figure that out. I would just make the image the background of the <ul> like you did with the parent <li>.
Transition is a much better use for your drop down than animation. This way you can have the animation work for both the close and open. In your current code, even if the animation did work, when you closed the drop down you either had to create another animation or just have it disappear.
The root of the problem was that Firefox wasn't running the animation before the change of the display type. If you didn't change display type, the animation would work.
Here are my changes regarding transition.
Assuming you're going to have multiple items, so I changed all of them to be hidden instead of visisble.
#main > li > ul {
visibility: hidden;
}
Changed animation to transition and updated margin to have the initial value.
ul.curent_buser {
background:#fff !important;
position: absolute;
top: 100%;
left: 0;
background: transparent;
border-top: 1px solid #eaeaea;
list-style: none;
margin-top: -10px; /* set to initial position */
border: 1px solid #ccc;
width: 100%;
border-radius: 7px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
I removed all of the animations and changed the focus to update margin and visibility.
#main li:focus ul {
margin-top:25px;
visibility: visible;
}
jsFiddle
Related
I'm trying to create a mobile vertical dropdown menu but I'm having an issue with showing the items of the sub-menu by using :focus for both .
I found a workaround by using :focus for sub-menu and :focus-within for its items .
This solution is working and showing the sub-menu items for Google Chrome only while other browsers like Samsung internet and UC browser are not showing any except the :focus of sub-menu.
I found another solution by using :hover for both and it's working for almost all browsers.
I have two questions:
Why it was working only with chrome only?
How do I use :focus for both the sub-menu and its items?
CSS used :
.main-nav a {
color:black;
display: block;
padding: 10px 3px 10px 3px;
font-size: 20px;
text-align: center;
font-family: 'hayah';
border-radius: 25px;
transition: border-radius 0.2s ease-in;
}
.main-nav a:hover {
background:#D7D7D7;
border-radius:25px 25px 0 0;
-webkit-transition: border-radius 0.1s ease-in;
-moz-transition: border-radius 0.1s ease-in;
-o-transition: border-radius 0.1s ease-in;
transition: border-radius 0.1s ease-in;
display: block;
}
.main-nav-ul ul {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 0;
max-height: 0;
overflow: hidden;
background-color: #D9D9D9;
color: black;
margin-bottom: 10px;
margin-top: 5px;
border-radius: 0 0 25px 25px;
font-size: 12px;
}
.main-nav-ul li:hover ul {
opacity: 1 !important;
max-height: 400px !important;
color: black;
background-color: #E2E2E2;
display: block;
}
Its hard to know what answer would work best for this situation without seeing how you implemented your HTML. :focus-within is not supported well: https://caniuse.com/#search=focus-within. Without seeing anything else I'm thinking maybe you would use JS to add and remove :hover/:focus like this answer: Can I disable a CSS :hover effect via JavaScript?. That way when you are not displaying sub-items you can get not use their hover effects.
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 6 years ago.
I have been trying to use css to show a Hidden Div fade in whenever I hover its parent element.
So far all I have managed to do was to get the hidden div to show, but there are no easing transitions what so ever.
Here is my Code on JSfiddle http://jsfiddle.net/9dsGP/
Here is my Code:
HTML:
<div id="header">
<div id="button">This is a Button
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
CSS:
#header #button {width:200px; background:#eee}
#header #button:hover > .content {display:block; opacity:1;}
#header #button .content:hover { display:block;}
#header #button .content {
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
opacity:0;
clear: both;
display: none;
top: -1px;
left:-160px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 7px 7px 7px;
-moz-border-radius: 0px 7px 7px 7px;
-khtml-border-radius: 0px 7px 7px 7px;
border-radius: 0px 7px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
background: #FFF;
}
Any clue as to what Im doing wrong? Just trying to get a smooth effect for the hidden content when I hover over the button. Thanks in advance!
display:none; removes a block from the page as if it were never there.
A block cannot be partially displayed; it’s either there or it’s not.
The same is true for visibility; you can’t expect a block to be half
hidden which, by definition, would be visible! Fortunately, you can
use opacity for fading effects instead.
- reference
As an alternatiive CSS solution, you could play with opacity, height and padding properties to achieve the desirable effect:
#header #button:hover > .content {
opacity:1;
height: 150px;
padding: 8px;
}
#header #button .content {
opacity:0;
height: 0;
padding: 0 8px;
overflow: hidden;
transition: all .3s ease .15s;
}
(Vendor prefixes omitted due to brevity.)
Here is a working demo. Also here is a similar topic on SO.
#header #button {
width:200px;
background:#ddd;
transition: border-radius .3s ease .15s;
}
#header #button:hover, #header #button > .content {
border-radius: 0px 0px 7px 7px;
}
#header #button:hover > .content {
opacity: 1;
height: 150px;
padding: 8px;
}
#header #button > .content {
opacity:0;
clear: both;
height: 0;
padding: 0 8px;
overflow: hidden;
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
border: 1px solid #ddd;
-webkit-box-shadow: 0px 2px 2px #ddd;
-moz-box-shadow: 0px 2px 2px #ddd;
box-shadow: 0px 2px 2px #ddd;
background: #FFF;
}
#button > span { display: inline-block; padding: .5em 1em }
<div id="header">
<div id="button"> <span>This is a Button</span>
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
You cannot use height: 0 and height: auto to transition the height. auto is always relative and cannot be transitioned towards. You could however use max-height: 0 and transition that to max-height: 9999px for example.
Sorry I couldn't comment, my rep isn't high enough...
I found a solution while tinkering around.
People who directly wanna see the results:
With click: https://jsfiddle.net/dt52jazg/
With Hover: https://jsfiddle.net/7gkufLsh/1/
Below is the code:
HTML
<ul class="list">
<li>Hey</li>
<li>This</li>
<li>is</li>
<li>just</li>
<li>a</li>
<li>test</li>
</ul>
<button class="click-me">
Click me
</button>
CSS
.list li {
min-height: 0;
max-height: 0;
opacity: 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.active li {
min-height: 20px;
opacity: 1;
}
JS
(function() {
$('.click-me').on('click', function() {
$('.list').toggleClass('active');
});
})();
Please let me know whether there is any problem with this solution 'coz I feel there would be no restriction of max-height with this solution.
I faced the problem with display:none
I have several horizontal bars with transition effects but I wanted to show only part of that container and fold the rest while maintaining the effects. I reproduced a small demo here
The obvious was to wrap those hidden animated bars in a div then toggle that element's height and opacity
.hide{
opacity: 0;
height: 0;
}
.bars-wrapper.expanded > .hide{
opacity: 1;
height: auto;
}
The animation works well but the issue was that these hidden bars were still consuming space on my page and overlapping other elements
so adding display:none to the hidden wrapper .hide solves the margin issue but not the transition, neither applying display:none or height:0;opacity:0 works on the children elements.
So my final workaround was to give those hidden bars a negative and absolute position and it worked well with CSS transitions.
Jsfiddle
Made some changes, but I think I got the effect you want using visibility. http://jsfiddle.net/9dsGP/49/
I also made these changes:
position: absolute; /* so it doesn't expand the button background */
top: calc(1em + 8px); /* so it's under the "button" */
left:8px; /* so it's shifted by padding-left */
width: 182px; /* so it fits nicely under the button, width - padding-left - padding-right - border-left-width - border-right-width, 200 - 8 - 8 - 1 - 1 = 182 */
Alternatively, you could put .content as a sibling of .button, but I didn't make an example for this.
max-height
.PrimaryNav-container {
...
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
...
}
.PrimaryNav.PrimaryNav--isOpen .PrimaryNav-container {
max-height: 300px;
}
https://www.codehive.io/boards/bUoLvRg
When you need to toggle an element away, and you don't need to animate the margin property. You could try margin-top: -999999em. Just don't transition all.
I am new to css and html and have a very small question. I am trying to add a opacity transition to description of an image when mouse hovers over. But it's currently not working and I am not sure why.
code:http://jsfiddle.net/3VHvM/
my html code:
<div class="bucket">
<img src="http://0.tqn.com/d/webdesign/1/0/C/m/1/puppy-in-shade.jpg" alt=""/>
<div class = "img-overlay">
<h3>Typography</h3></div>
</div>
my css code:
.bucket {
width: 31%;
float: left;
position: relative;
margin-top: 1%;
margin-right: 1%;
margin-bottom: 1%;
margin-left: 1%;
text-shadow: 0px 0px 0px;
-webkit-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;
background-color: rgba(0,0,0,1.00);
overflow: hidden;
}
.img-overlay {
background-color: rgba(0,0,0,1.00);
bottom: 0px;
color: #FFFFFF;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.05s;
-webkit-transition: opacity 0.05s;
-moz-transition: opacity 0.05s;
}
.bucket:hover .img-overlay {
opacity:0.75;
filter: alpha(opacity=75);
}
.bucket img {
width: 100%;
}
Thank you for your help
1/20th of a second is too fast to see the effect. Try 2s instead.
http://jsfiddle.net/3VHvM/1/
.img-overlay {
background-color: rgba(0,0,0,1.00);
bottom: 0px;
color: #FFFFFF;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 2s;
-webkit-transition: opacity 2s;
-moz-transition: opacity 2s;
}
it's working - just too fast for eye to see, you need to decrees the transition speed, try 1s.
this option sets how long will take to the animation to run, 0.05s (s=seconds) it much to fast.
here:
transition: opacity 1s;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
your code is correct. Just the time is too less. try 0.5 sec. you will see the output.
The transition may not even be noticeable unless its .5s or slower. Quentin is right .2s is the fastest that it is noticeable if you're looking for it but if you want a viewer to pay attention to it, you should consider going even slower.
I have an image with transparent background. I would like to make a css3 background animation when the mouse hovers it.
This is the CSS i'm using:
#keyframes in
{
from {background-color: #fff;}
to {background-color: #900;}
}
#-webkit-keyframes in /*chrome-safari*/
{
from {background-color: #fff;}
to {background-color: #900;}
}
img {
width: 150px;
height: 150px;
border: 1px solid black;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
img:hover {
animation: in 0.5s;
-webkit-animation: in 0.5s;
cursor: pointer;
}
The animations work, the problem is that when the animation reaches the end point (background-color: #900), it returns to the start point (background-color: #fff).
JSFiddle
How do i make the background permanent after the animation?
Just adding the fill-mode do the trick:
animation-fill-mode: forwards;
JSFiddle
I styled a link so that when you hover it, there will appear a border on the top; and when you hover off the border will disappear with a transition. The border slides in instead of fading in when you hover over it and off. I want the border to fade in instead of slide. How can I do this? Here is a JsFiddle
HTML
<div>Text</div>
CSS
div {
line-height: 50px;
width: 100px;
text-align: center;
cursor: pointer;
transition: border .2s ease-in-out;
-webkit-transition: border .2s ease-in-out;
-moz-transition: border .2s ease-in-out;
}
div:hover {
border-top: 3px solid #000;
}
html, body {
margin: 0;
padding: 0;
}
If you want to animate the color, animate the color, not the entire border. You're now also animating it from 0 pixels to 3 pixels, so of course it slides in. You should just give it a default transparent border instead.
div {
line-height: 50px;
width: 100px;
text-align: center;
cursor: pointer;
transition: border-color .5s ease-in-out;
border-top: 3px solid transparent;
}
div:hover {
border-top-color: #000;
}
Sample on JSfiddle
As a sidenote: -moz-transition is obsolete nowadays, since FF17 or so Mozilla supports the CSS Transitions module without prefix.
Update dec 2014: as I noticed this answer is still being viewed and upvoted frequently, please note that transition is no longer prefixed in any current or recently superseded browsers.
In this case - you are going to need to have a border to begin with as well. Make it transparent in the first state. This way it will not "grow" into place... and the color will just fade as it changes.
http://jsfiddle.net/kLnQL/11/
div {
border: 3px solid transparent;
}
div:hover {
border: 3px solid #f06;
}