I have a menu created with ul/li lists.
To create a nice effect, I have the following css:
#menu ul {
/* ... */
visibility:hidden;
/* ... */
}
#menu li:hover > ul {
/* ... */
visibility: visible;
/* ... */
}
You can view the full code here: http://www.red-team-design.com/css3-animated-dropdown-menu.
The menu works fine without any issues unless I embed a Youtube video (e.g. a random video - <iframe src="http://www.youtube.com/embed/e80qhyovOnA?rel=0" frameborder="0" width="420" height="315"></iframe>).
I have troubleshooted the problem to the visibility css property and when using Chrome.
Is there a way I can change the CSS to keep the bouncing effect?
Replacing this with display:none works but it looses the bouncing effect. There seems to be a conflict with Youtube's code. Ideally I do not touch anything within the iframe unless it is automated as videos are embedded via WYSIWYG.
Thank you.
Youtube CSS makes something wrong with transitions, so, just change
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
to
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
It helps me a lot.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am working on a static website and have some animations in CSS:
*
{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
This is fine and everything and every page is animated in the same way except one of my HTML documents which also contains input elements and a textarea:
<form action="script/contact-form.php" method="post">
<b>Full name:</b><br/>
<input type="text" name="name" /><br/>
<b>Subject:</b><br>
<input type="text" name="subject" /><br/>
<b>E-mail:</b><br>
<input type="text" name="email" />
<br/><br/>
<b>Your comments:</b><br/>
<textarea name="comment"></textarea>
<br/><br/>
<input type="submit" value="Submit" />
</form>
For some reason the entire page is then animated (unlike the other pages, which are using the same stylesheet). I tried disabling this with:
form, input, textarea
{
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in-out;
-ms-transition: color 0 ease-in-out;
transition: none;
}
but it doesn't seem to have any effect. Here is what it looks like: http://notrussian.de/stack/contact-us.html. Clicking on other pages without the form has different effects.
This is starting to drive me nuts and I really hope you guys could help me out.
Thanks in advance.
What is going wrong
You say :
For some reason the entire page is then animated
That's the expected behaviour when you use this code :
* {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
The CSS selector * means that any CSS properties for that selector are applied to every element on your web page.
The value all for property transition means that every property of those elements that can be animated will be animated.
So, the combination of CSS selector * and CSS property transition: all means that every property that can be animated will be animated for every HTML element on your web page.
Solution 1 : Animate ONLY what you want to animate
You could do something like this :
/** Get rid of this code
* * {
* -webkit-transition: all 1s ease-in-out;
* -moz-transition: all 1s ease-in-out;
* -o-transition: all 1s ease-in-out;
* -ms-transition: all 1s ease-in-out;
* transition: all 1s ease-in-out;
* }
*/
.animate, .animate * {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Then, in your HTML, add class=animate to every element you want to animate :
<ul class="animate">
...
</ul>
There are many alternative implementations, but this is one of the easiest ones. For the best approach, see "Additional improvements" herebelow.
Solution 2 : Disable animation for what you DON'T want to animate
This should work :
form, input, textarea {
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in-out;
-ms-transition: color 0 ease-in-out;
transition: none;
}
You say you tried it, but I can't find it anywhere in your code when I go to the page you referenced. Anyway, make sure you put it BEHIND the * selector.
Additional improvements
For the sake of performance AND to prevent unexpected behavior, it's best to always set animation ONLY for those properties and those elements you really want to animate.
So, if you want to animate both the width and height of your div elements, you should do something like this :
div {
-moz-transition: width 2s, height 4s;
-webkit-transition: width 2s, height 4s;
-o-transition: width 2s, height 4s;
-ms-transition: width 2s, height 4s;
transition: width 2s, height 4s;
}
If you want to animate just the background of your #navigation li elements, you should do something like this :
#navigation li {
-moz-transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
}
i have issue in CSS it can't move smoothly in menu bar, the menu in this link can anyone help me thanks .
here is the link jsfiddle.
i try this but nothing work :
.div-move{
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
You can't transition to width:auto, but by using max-width is automatically with use the size of your text. Just make sure the :hover width is longer then the text you use so it will all appear. Also I suggest using a transition on both hover and regular classes so you also have a transition when you mouse off the menu. Try changing these classes:
.text-header-move{
max-width: 0px;
float: right;
overflow: hidden;
-webkit-transition: max-width 1s ease-in-out;
-moz-transition: max-width 1s ease-in-out;
-o-transition: max-width 1s ease-in-out;
transition: max-width 1s ease-in-out;
}
.notification-bar:hover .text-header-move{
max-width:400px;
-webkit-transition: max-width 1s ease-in-out;
-moz-transition: max-width 1s ease-in-out;
-o-transition: max-width 1s ease-in-out;
transition: max-width 1s ease-in-out;
}
You want to transform to an "auto" value that was one of the problems.
.notification-bar:hover .text-header-move{
width:auto;
}
Take a look at this fiddle:
http://jsfiddle.net/herrfischerhamburg/jok48kpz/2/
I updated the fiddle to work with a "max-width", i think this is the better solution for you than the fixed width.
I am creating a navigation bar and I am having issues getting the hover's background color to take place of the entire area I want it to be in. I want it to be the entire block of the list item as well as the padding I have created. Right now it is only changing the color of the link's title name.
I created a fiddle to show what is happening.
https://jsfiddle.net/aqdw7mh3/
I have tried adding width: 100%; to:
.spectator_nav li:hover ul {
display: block;
}
and
.spectator_nav li a:hover {
background-color: #282828;
-o-transition:color .4s ease-out, background .3s ease-in;
-ms-transition:color .4s ease-out, background .3s ease-in;
-moz-transition:color .4s ease-out, background .3s ease-in;
-webkit-transition:color .4s ease-out, background .3s ease-in;
/* ...and now for the proper property */
transition:color .4s ease-out, background .3s ease-in;
}
This did nothing to help my case. What am I missing?
Set a to the size of the block. This way, it will fill up the block and the background will too.
Removed/changed some things but hopefully this is what you're after: https://jsfiddle.net/aqdw7mh3/4/
I am working on CSS 3 transition effect for navigation menu.I want to have opacity effect for the submenu on hover of the menu.And Its working.
But the problem is that I want to show submenu on hover of menu item.But in my case with the following code, submenu is opacity effect works on hover of submenu as well.
#mega-menu-wrap-primary-2 #mega-menu-primary-2 > li.mega-menu-megamenu > ul.mega-sub-menu {opacity:0 !important;
display:inline !important;
transition: opacity 1s ease-in-out;
-webkit-transition:opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
-o-transition:opacity 1s ease-in-out;}
/*for transition*/
#mega-menu-wrap-primary-2 #mega-menu-primary-2 li {}
#mega-menu-wrap-primary-2 #mega-menu-primary-2 > li.mega-menu-item:hover > ul.mega-sub-menu {
-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;
opacity:1 !important;}
NOTE: I am having submenu with 660px height.And also I am using wordpress.So I can't show you on JSFiddle.
What might be the issue here ?
Tell me if you have doubt related to this question.Thanks.
My site address is http://applocity.blogspot.com/
I have a navigation bar (#cssmenu if you want to find it in the source code) and for some odd reason this is occurring: I made it so the links change colors upon hover and that works fine. But I wanted to add a transition so the background-color changes colors by fading in and out. This works fine on Chrome but it only works on the sub-links (e.g. under device and category) on Firefox. I have not been able to figure out why this happens.
#cssmenu a {
background: #999999;
color: #FFF;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-ms-transition: background 1s ease;
-o-transition: background 1s ease;
transition: background 1s ease;
padding: 0px 25px;
//border-radius: 5px; (NOT ACTIVE)
}
#cssmenu ul li:hover > a {
background: #66FF99;
color: #000000;
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-ms-transition:background 0.3s ease;
-o-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
(There is more on the source code of the site--CTRL+F #cssmenu)
What I've tried so far:
Putting background-color instead of background
Using -moz-transition...of course
Re ordering and placing where I put the transition attributes in the CSS code (e.g. under #cssmenu as well as #cssmenu:hover.
I figured it out. Here is the link to my solution. http://jsfiddle.net/mrytF/2/
The problem was coming from lines 59-61. You had this code:
.cssmenu a {
-moz-transition: background 1s ease;
}
When .cssmenu doesn't exist. So I commented this code out, and it works fine now in firefox. I also commented out some CSS that I thought was redundant
Hope this helps
Edit
Fixed the problem with not having the sub-menu show. The main problem here was that you had line 22 as #cssmenu ul li.hover, when it needed to be #cssmenu ul li:hover.
Here is the fiddle
http://jsfiddle.net/mrytF/3/