I'm trying to have a menu that has a submenu and this is what I have for the moment (it's more complex than this), I want to use the transition property:
.product:hover #button-option {
visibility: visible !important;
}
#button-option {
visibility: hidden;
-webkit-transition: visibility .2s;
transition: visibility .2s;
}
Here is my jsfiddle: http://jsfiddle.net/4bsmq2kg/
I want my submenu to appear a little later, or like take some time to appear like in here: http://www.vmware.com
How could I make this work? I tried several things but none has been working. Thanks!
EDIT: I'm actually stupid and didn't realize a mistake there was in the code, but I still cannot find what I really wanted to find.
Visibility will transition, but only in binary (on/off) fashion. Perhaps you want to transition on opacity in addition (since visibility needs to be off to prevent mouse detection on the element). You probably also don't need/want the !important. Also, unless you are targeting old browser versions, you don't need the webkit-transition prefixed property (if you're going to specify it, should be -webkit-transition).
Visibility will not animate well. For that you might better animate opacity:
#button-option {
opacity: 0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.product:hover #button-option {
opacity: 1;
}
If you want the menu to slide from left to right, then you can also animate position:
#button-option {
left: -300px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.product:hover #button-option {
left: 0px;
}
You can check for more detail here.
At the end, I mixed opacity with visibility, thank you all! going to try some of your suggestions too, Good Night!
Related
Right now I try to create the following web page: https://wpjelly.com/shave/
Can someone help me, how I can disable the (blurry) hover effect of the logo in the center?
I still want to keep the hover effect of the menu and dropdown menu, but want to get rid of it of the logo. I already tried to add some CSS, but all didn't work.
Thank you very much in advance!
Kind regards,
Jonas
The logo has opacity: 0.6 set when being hovered.
Set it to 1:
#site-header.center-header #site-navigation-wrap .middle-site-logo:hover img {
-moz-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
set the opacity to 1
and remove the transitions
#site-logo #site-logo-inner a img {
width: auto;
vertical-align: middle;
**webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;**
I'm trying to animate a toggle-able sidebar so that it slides open and closed, and I can't seem to get the animations to work whatever I do. I think I'm getting confused with how I'm supposed to apply animations to ngShow/ngHide elements.
I've included an example here: https://jsfiddle.net/chiggerchug/m6ahk463/62/
EDIT: Link updated, menu now pauses before closing, but no animation is applied.
Here's an example of my css which is applied to the element that is being toggled:
.animate-show-hide.ng-hide {
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}
.animate-show-hide.ng-hide-remove {
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}
Any help on this issue would be greatly appreciated, Thanks.
The above code of yours is working. You just have to change your animation class
#keyframes myChange {
from {
width: 250px;
} to {
width: 0;
}
}
.animate-show-hide.ng-hide {
animation: 0.5s myChange;
}
Fiddle:https://jsfiddle.net/m6ahk463/64/
Updated Fiddle: https://jsfiddle.net/m6ahk463/66/
Transition must happen when we move from one value to another upon a event.
Here the visibility setting on an element:
.two {
background-color: #9fa8da;
position: absolute;
visibility: hidden;
transition: visibility 3ms ease-in;
}
Upon a button click, visibility is set to 'visible'
.two-show {
visibility: visible;
}
However there is no animation effect.
Plnkr here:
http://plnkr.co/edit/4Fhb1Uj744BRwCDhebOP?p=info
Try adding this to .two{}:
-webkit-transition: visibility 30ms ease-in, -webkit-transform 3s;
-moz-transition: visibility 30ms ease-in;
-o-transition: visibility 30ms ease-in;
I wonder if 3ms is to fast?
You can achieve the very same effect you want using the opacity property. Updated your plunker using this new approach. I also increased the transition time for the effect to be noticeable.
.two {
background-color: #9fa8da;
position: absolute;
opacity: 0;
transition: opacity 3s ease-in;
}
.two-show {
opacity: 1;
}
I'm trying to get tabs (as a menu) to be offset the screen and when somebody hovers over it, it transitions downwards revealing more of the tab. My code is this:
.tab:hover {
position: relative;
top: 45px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
When I hover over the image, it does the transitioning downwards correctly. However, when I leave the tab, it snaps back into place. What I'd like it to do is transition back into its original place, not snap. What am I missing from the code to make this happen?
UPDATE:
I figured out the problem. I made a new CSS style set for just .tab and I put in the transitioning AND top: 0px.
Instead of putting it on the :hover, put the transition on .tab.
I'm new to CSS and now facing a problem which I can't get rid of.
I made an animation using css3 keyframes. This animation simply changes the rotation of an image whenever someone hovers it. Now I wanted to link this image to a website, but the way I did it, the animation doesn't run at all.
<div class="tunein"><a href="http://www.google.com/">
<img src="https://www.google.com/images/srpr/logo3w.png"></a></div>
.tunein{
position: absolute;
top: 40%;
left: 10%;
display: block;
-webkit-transform:rotate(12deg);
-moz-transform:rotate(12deg);
}
.tunein a:hover{
animation: rotate 0.5s ease-out;
-moz-animation:rotate 0.5s ease-out;
-webkit-animation:rotate 0.5s ease-out;
}
js fiddle for you:
http://jsfiddle.net/9jMqc/
When i add the class tag into the a-element, the offset changes dramatically but the animation works.
I'd propose moving the events onto the <a> link, so moving them as per http://jsfiddle.net/9jMqc/2/
.tunein a {
display: block;
-webkit-transform:rotate(12deg);
-moz-transform:rotate(12deg);
}
.tunein a:hover{
animation: rotate 0.5s ease-out;
-moz-animation:rotate 0.5s ease-out;
-webkit-animation:rotate 0.5s ease-out;
}
I think you were perhaps missing display: block on the <a> link previously - Just for reference, you shouldn't need to use display: block on <div></div>'s as that's their default unless otherwise declared in your CSS.