This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 8 years ago.
I can't get transition to work on a website i'm working on. The nav menu hides and shows correctly, but it just appears instantly without tranistion. The CSS is this:
.nav ul li ul li {
display:none;
visibility:hidden;
transition: all 0.5s ease;
}
.nav ul li:hover > ul
{
transition: all 0.5s ease 0s;
display:block;
visibility:visible;
}
and the HTML is
<div class="nav">
<ul>
<li>test</li>
<li>test
<ul class="sub-menu">
<li>test</li>
</ul>
</li>
</ul>
</div>
I have tested it in chrome, ffx, ie.
I actually got most of this code off another answer on this site, so i'm not sure what my problem is here.
I should have mentioned, I have tried opacity from other answers, but in a drop down menu, it won't work as the menu stays there.
The transition from display: none to display: block does not behave like you expect.
Work with opacity instead.
jsFiddle Demo
Try This CSS this will work fine
.nav ul li > ul {
opacity:0;
overflow:hidden;
transition: all 0.5s ease;
}
.nav ul li:hover > ul
{
transition: all 0.5s ease 0s;
height:auto;
opacity:1;
}
Demo Here
display property does not work with transitions.
what itay suggested is valid,and you can play with other properties as well (position ?)
to make the desired effect.
Related
This is a highly specific problem that other people probably won't come across very often. My job has a name that begins with "Mc," and we have some code for the website that automatically makes the "c" in "Mc" small, because our many content creators often get this wrong. The code does this by inserting a span element around the 'c' with a class attached to some styling.
On the site I'm working on now, there's a link with the name in it that is supposed to transition from one color to another on hover. The problem is that this little 'c' transitions slower than the rest of the string inside the 'a' element. However, as I said in the title, this is problem ONLY in Chrome.
I've created a simple jsFiddle that reproduces this issue: https://jsfiddle.net/2z07neyL/2/
Markup:
<ul>
<li>
Work at M<span class="minyC">c</span>Creary's
</li>
</ul>
Styling:
* {
transition: color 0.15s ease, background-color 0.15s ease;
}
li a {
color: white;
}
li a:hover {
color: #bf5700;
}
I'm pretty stumped on this one. Getting rid of the minifying code is not an option, neither is removing the transition.
EDIT: When I say I can't remove the transition, I mean I can't remove the transition for the * rule specifically. That rule covers more than this one element.
EDIT2: This problem has been solved, per the comments: https://jsfiddle.net/2z07neyL/6/
li a {
color: white;
transition: color 0.15s ease, background-color 0.15s ease;
}
li a:hover {
color: #bf5700;
}
<ul>
<li>
Work at M<span class="minyC">c</span>Creary's
</li>
</ul>
Try this instead. Here's an updated fiddle link..jsfiddle
Try this CSS instead:
li a {
transition: color 0.15s ease, background-color 0.15s ease;
}
li a {
color: white;
}
li a:hover {
color: #bf5700;
}
<ul>
<li>
Work at M<span class="minyC">c</span>Creary's
</li>
</ul>
I'm not sure what is causing the problem, but I know how to fix it :)
Fiddle: https://jsfiddle.net/beekvang/2z07neyL/4/
$(document).on('mouseover', 'a', function() {
$(this).addClass("trans");
});
$(document).on('mouseout', 'a', function() {
$(this).removeClass("trans");
});
a { color: white; }
.trans {
transition: color .3s ease;
will-change: transform;
}
a.trans { color: #bf5700; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Work at M<span class="minyC">c</span>Creary's
</li>
</ul>
I am a new HTML/CSS guy, and I want to learn HTML and CSS. Now I saw this wonderful website; when you hover over the about us tab in the menu there is an animation on the submenu. That's the animation that I tried re-creating.
Here's what I have tried: JS Fiddle.
Now, it all works fine, below is the CSS that actually does the trick:
.menu > li a:hover ~ .sub-menu{
display: block;
-webkit-animation-name: smallanim;
-o-animation-name: smallanim;
animation-name: smallanim;
-webkit-animation-duration: .5s;
-o-animation-duration: .5s;
animation-duration: .5s;
}
#keyframes smallanim {
0% {
transform:translateY(20px);
}
100% {
transform:translateY(0px);
}
}
It's .menu > li a:hover ~ .sub-menu this selection that basically does the trick. But is this the right way to do it? If you hover on the main menu the submenu appears, but then when you try hovering on the sub-menu, the menu disappears. Do I need to use jQuery?
You need to do
.menu > li:hover a ~ .sub-menu
instead of
.menu > li a:hover ~ .sub-menu
I'm basically trying to add an animation to my navigation so when a user hovers over the links the text color fades in blue, and then fades back out to black after. I've read up on the transition property and watched a few tutorials on Youtube but I can't get it to work when I apply it to my own navigation bar.
Below is a link to my Codepen, if anybody could shed some light on the problem I'd be really appreciative..
Thanks
HTML:
<!-- header starts here -->
<header>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Service</li>
</ul>
</nav>
</header>
http://codepen.io/Clarkpen/pen/razMWB
Try here:
http://codepen.io/anon/pen/myMrRq
I included a transition on the anchor:
nav ul li a {
transition:all 400ms ease-in;
}
Note it is good practice to add the vendor prefixes:
nav ul li a {
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 1400ms ease-in-out;
-o-transition: all 400s ease-in-out;
transition: all 400ms ease-in-out;
}
EDIT
I have edited your codepen here to only add the transition to the navigation links:
http://codepen.io/anon/pen/RNZGpL
nav ul{margin:0px;padding:0px;}
nav ul li{float:left;list-style:none;}
nav ul li a{text-decoration:none; padding:15px; color:#666; text-transform:uppercase;transition:ease-in 0.5s;-webkit-transition:ease-in 0.5s;-ms-transition:ease-in 0.5s;-moz-transition:ease-in 0.5s;}
nav ul li a:hover{background:#F00; color:#FFF;}
<nav>
<ul>
<li>Home</li>
<li>About US</li>
<li>Products</li>
<li>Feedback</li>
<li>Contact</li>
</ul>
</nav>
Demo
HTML:
<ul class="nav">
<ul>
<li>Home</li>
<li>A
<ul>
<li>X</li>
<li>Y</li>
<li>Z
</ul>
</li>
</ul>
</ul>
CSS:
.nav ul ul {
position:absolute;
visibility: hidden;
opacity:0;
width:170px;
margin:0;
transition:visibility 0s linear 0.3s, opacity 0.3s linear;
-webkit-transition:visibility 0s linear 0.3s, opacity 0.3s linear;
-moz-transition:visibility 0s linear 0.3s, opacity 0.3s linear;
}
.nav ul li:hover > ul {
visibility: visible;
opacity:1;
}
I want the first level to fade in, on hover on a list item of the main menu, but it just doesn't seem to work. I have spent hours on it and I'm not sure what's really wrong. Any pointers?
If you need to see the complete code: http://paperbird.in/projects/BusinessConclave/index.php
Edit: Ok, you contributed your website, so here's the solution, actually the transition does work, but z-index is causing you an issue there, so it flicks the sub menu instantly.. though it transits, use z-index: 100; for .nav ul li:hover > ul on line 153 in style.css and make sure you remove visibility properties as they are not required.
First of all, your markup is invalid, you cannot nest ul as a direct descendant to ul so nest that in an li and secondly, you cannot transit visibility property, so only use opacity and get rid of the visibility property as well. If you want, you can also use animation-timing-function property with a value of linear for a consistent fadein and fadeout effect.
Demo
.nav ul ul{
position:absolute;
opacity:0;
width:170px;
margin:0;
-webkit-transition:opacity 0.3s linear;
-moz-transition:opacity 0.3s linear;
transition:opacity 0.3s linear;
}
.nav ul li:hover > ul{
opacity:1;
}
And make sure you declare properietary properties before general properties.
I'm trying to understand the simplest background transition possible using only HTML5 and CSS3. Searching through stackoverflow I've learned it can be easily implemented using external libraries such as jQuery but for this project I've decided not relying on any of those.
Markup
<nav>
<ul>
<li><a id="foobar" href="http://www.google.com/search?q=foobar">Foobar</a></li>
</ul>
</nav>
Styles
body {
background: url('background-default.png'), no-repeat;
}
#foobar a:hover {
background: url('background-hover.png'), no-repeat;
-webkit-transition: // TODO;
-moz-transition: // TODO;
-o-transition: // TODO;
-ms-transition: // TODO;
transition: // TODO;
}
As I mentioned in my comment, you can't transition the background-image property but you can get the sort of effect you're looking for if you're willing to add extra markup and then transition the opacity. So you'll have some markup like this:
<nav>
<ul>
<li>
<img src="no-icon.png">
<img src="yes-icon.png">
<a id="foobar" href="http://www.google.com/search?q=foobar">Foobar</a>
</li>
</ul>
</nav>
Then set the transition on the images, absolute position them (so they'll be like backgrounds), and hide one of them by default (I've left out the vendor extensions for clarity):
nav li img {
position: absolute;
transition-duration: 1.5s;
opacity: 1;
}
nav li img:first-child {
opacity: 0;
}
Then swap the opacity values on li:hover:
nav li:hover img {
opacity: 0;
}
nav li:hover img:first-child {
opacity: 1;
}
Here's a full working example. Not an ideal solution because you have to add extra markup, but it'll work.
Here's an example of the code I use to achieve this. The images are sprites which each contain normal and hover state. The trick is to add the img to both li and a, and to use opacity to change the appearance of the image. You can then use css3 transitions to make this appear smoother.
<ul id="homenav">
<li class="h"><a href="#><span>Home</span></a></li>
<li class="i"><span>Inloggen</span></li>
<li class="v"><span>Voorbeelden</span></li>
</ul>
#homenav li.h, #homenav li.h a {background-image: url('img/btn_home.gif');}
#homenav li.i, #homenav li.i a {background-image: url('img/btn_inloggen.gif');}
#homenav li.v, #homenav li.v a {background-image: url('img/btn_voorbeelden.jpg');}
#homenav li {background-position: 0 170px;}
#homenav li a {background-position: 0 0;}
#homenav li a:hover
{opacity: 0;
-webkit-transition: opacity .8s ease-in;
-moz-transition: opacity .8s ease-in;
-o-transition: opacity .8s ease-in;
transition: opacity .8s ease-in;}
#homenav a {display: block; height: 100%;}
#homenav a span {display: none;}