I'm trying to fade in a list but for some reason the transition appears to be ignored.
HTML
<div>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
CSS
div {
background-color: #ccc;
width: 200px;
height: 200px;
}
ul {
display:none;
/*transition*/
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
div:hover ul {
display: inline-block;
}
Is there a problem with the way I'm trying to implement this?
http://jsfiddle.net/QeG4X/1/
You can not animate the display property of css. You can do it with opacity!
Here is an updated fiddle
http://jsfiddle.net/cfknoop/QeG4X/2/
ul {
opacity:0;
/*transition*/
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
div:hover ul {
opacity:1;
}
Another option is to animate the height i.e. of an element.
Well, display is not animatable, since you want to fade in, add opacity: 0 to ul and opacity: 1 in div:hover ul. Note you would have to remove display from both rules. See the fiddle: http://jsfiddle.net/QeG4X/3/
Related
I have a jsfiddle set up of the code I have so far. Basically I can't seem to make the rollover animation happen with hover for the main body of text in each ul.
So when you rollover the individual areas the code for opacity on these classes.....
.browser .statistic,
.browser .download {
display: block;
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
Becomes 1. But i can't seem to get the transition animation to happen Can someone point me in the right direction.
Cheers,
Greg.
sorry if i missunderstanding you.
i just added:
li:hover .browser * {
opacity: 1;
-webkit-transition:opacity 1500ms ease-out;
-moz-transition:opacity 1500ms ease-out;
-o-transition:opacity 1500ms ease-out;
transition:opacity 1500ms ease-out;
}
DEMO: http://jsfiddle.net/zn09vjbv/1/
UPDATE:
is there any way to get the "h2 span" class to also change its
background position when the li is hover ?
yes, just add this: (add any attribute you like inside this class)
li:hover .browser h2 {
background: #000;
color; #FFF;
......
}
you need to set the transition on the main class of the object you are trying to animate, not on the class you are adding on hover
.initial-element{
opacity:1;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.initial-element:hover{
opacity:0;
}
I've got a dropdown menu that uses lists to achieve it. The sub menu has a height of 0 and then the hight changes when the user hovers over it.
The limit of the animation is that I can't set the max-height as auto so I've set it to a value that it unlikley that the sub menu will ever reach.
Since the tranistion time is based on the max-height is is very fast so I've slowed it down to be a suitable speed but what I'd like is to have it disappear a lot faster when someone un-hovers or even have it disppear immediately. Is there a way to do this?
.menu ul ul{
float: left;
padding: 0;
position: absolute;
text-align: left;
width: 274px;
z-index: 1000;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 1s ease-in;
-moz-transition: max-height 1s ease-in;
-o-transition: max-height 1s ease-in;
-ms-transition: max-height 1s ease-in;
transition: max-height 1s ease-in;
}
.menu ul li:hover ul, .menu li.over ul {
max-height: 999px;
}
I'd like to stick to CSS but I'm willing to use JavaScript.
Try this :
For the basic class ( not the :hover ), just define the transition duration you want for when the list will disapear.
On hover, define a new transition duration ( the duration that the list will take to appear ).
Quick exemple here : http://codepen.io/AxelCardinaels/pen/wBQZbm
HTML :
<div class="text">Some texte</div>
CSS :
.text{
background:blue;
transition:all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.text:hover{
background:red;
transition-duration:2s;
}
I have 2 images that are changing when I hover on the first one.
On the second one, I have some text because I want a link there.
My problem is now that I want the hover image to remain when I hover over the link.
Here is my code:
#blur {
border: 1px solid #bebfc1;
position:relative;
height:450px;
width:300px;
margin:0 auto;
-webkit-transition: border 1s ease-in-out;
-moz-transition: border 1s ease-in-out;
-o-transition: border 1s ease-in-out;
transition: border 1s ease-in-out;
}
#blur img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#blur:hover {
z-index:2;
border: 1px solid #000000;
}
#blur img.top:hover {
opacity:0;
}
#blur .text {
position:absolute;
color:#bebfc1;
opacity:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
font-family:"Segoe UI Light";
font-size:13px;
}
#blur:hover .text {
opacity:1;
}
<div id="blur">
<img class="bottom" src="http://s28.postimg.org/do5izc4gd/image.png" />
<img class="top" src="http://s28.postimg.org/a5tj2y3kd/image.png" />
<p class="text" style="bottom:6px; left:180px;">link</p>
</div>
When I hover over the link I want the red image to remain the same.
How can this be done?
Thanks !!!
DEMO here http://jsfiddle.net/VYR9q/
Okay, I fixed it in the fiddle line you provided :)
Here you are what I fixed:
#blur:hover .top {
opacity:0;
}
Instead of:
#blur img.top:hover {
opacity:0;
}
Edit from: #biziclop:
You can make it:
#blur:hover img.top
I think you should simply move :hover from the img to the common parent #blur
#blur img.top:hover {
to
#blur:hover img.top {
Live example: http://jsfiddle.net/VYR9q/2/
Change your css to :
#blur:hover img.top {
//your css
}
I tried to make a menu, which has 3 menu items and 1 subitem. If I click on second item, first child item should display. But not normally display it. It should animate it and slide it. I think there is a way with transition but I don't really know CSS3. And I want to have a pure css solution.
Here my HTML code:
<div id="menu">
<ul>
<li>First</li>
<li class="active">Second
<ul class="child">
<li>First child</li>
</ul>
</li>
<li>Third</li>
</ul>
</div>
I created this fiddle. Now I want to show First child menu item slowly if I click on Second menu item.
The only thing that I did before was checking transition but I just don't get it.
Can someone give me a hint?
Cheers
See your jsfiddle updated http://jsfiddle.net/3kEg4/3/
#menu {
height: auto;
width: auto;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu ul li {
float: left;
position: relative;
}
#menu ul li a {
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #0CF;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#menu ul li a:hover {
background-color: #0C3;
}
#menu ul li ul {
position: absolute;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
height: 0px;
overflow:hidden;
}
#menu ul li:hover ul {
height: 100px;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
}
(inspired from http://jsfiddle.net/ashukasama/2BqGY/)
You can use some CSS3 animations to achieve this effect.
#menu ul li ul{
opacity:0;
-webkit-transition: .6s ease;
-moz-transition: .6s ease;
-ms-transition: .6s ease;
-o-transition: .6s ease;
height: 0;
}
#menu ul li:hover ul {
opacity: 1;
height: 100px;
}
JSFIDDLE
radio active states
JSFIDDLE Radio
Stackoverflow Q
jQuery
$('.subMenu').on('click', function() {
$('.subMenu ul').slideToggle(1000);
});
JSFIDDLE jQuery
i think this is better
#menu ul li ul{
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
position: absolute;
}
#menu ul li:hover ul {
visibility: visible;
opacity: 1;
position: relative;
}
Works great as well. Please do add prefixes. Hope this helps someone.
I'm trying to create a horizontal menu that increases in height and displays a vertical list when you hover over it. If there is a way to make a smooth transition when the menu increases in height that would be nice too.
#nav {
width: 100%;
height: 20px;
background-color: #989898;
}
#nav:hover {
height: 80px;
}
#nav li {
display: inline;
padding: 15px;
}
#nav a {
color: black;
text-decoration: none;
}
<div id="nav">
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
</ul>
</div>
Here's a gif demonstration of what I want to do:
I added this code to yours to make it animate:
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
Here is a fiddle:
http://jsfiddle.net/Hive7/7HS8p/
Check out this example: its similar to what u want...
Link
Something like this?
jsFiddle demo here
-webkit-animation: move .5s;
-webkit-animation-fill-mode: forwards;
#-webkit-keyframes "move" {
100% {
height:80px;
}
}