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/
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 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!
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.
I'm having a issue with the background-image transition using CSS3. The problem is that it occasionally flickers the first time you roll over it. If you roll-over it the second time it's no problem makes a smooth fade-in/fade-out from one to the other.
I've searched google about this issue found a bunch of people having the same problem. But they resolved the issue by using 1 background image and then using background-position to hide it till you roll over it.
I can't do that with mine because I need the smooth fade-in/fade-out animation from 1 image to the other (it's 2 images of the same button with different colors and thingies.) If I use background-position it'll come from underneath the button on it's place. I need a fade-in fade-out animation.
So I'm guessing this issue happens because of the image not being loaded that, and that it needs a fraction of a second to load.
Here's the code:
.btn-denken{
background:url(../images/btn-denken.png);
width:219px;
height:40px;
float:left;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.btn-denken:hover{
background:url(../images/btn-denken-hover.png);
}
Help is very much appriciated! Thank you!
The trick is to make sure that the images you want to do transition on are already loaded by CSS, that's why putting them in the document as dummy's and loading them through CSS is the solution.
In the example below I have 4 images (0.jpg - 3.jpg), and if I would now set the class '.landing-1' on my document (html), the images transition properly.
In my CSS:
body {
-webkit-transition: background 1s;
background: url(0.jpg) no-repeat center center / cover fixed;
}
.dummy-image {
position: absolute;
left: -100%; /* to hide the dummy */
}
Simple javascript to cache the images:
var images = [],
load = function() {
$('head').append('<style>html.landing-'.concat(this.index, ' body.landing, .dummy-image-', this.index, ' { background: url(', this.src, ') no-repeat center center / cover fixed; }</style>'));
$('body').append('<div class="dummy-image dummy-image-'.concat(this.index, '">'));
};
for(var i=0; i<4; i++) {
var image = document.createElement('img');
image.src = i + '.jpg');
image.index = i;
image.onload = load;
images.push(image);
}
Perhaps you can use two separate containers in the same area using absolute positioning and z-index. Set the two different background images one per container, and then when you hover just make the opacity of the top container to be fully transparent.
I had the same problem: I wanted to use transitioning to fade between images. Using a 2-in-1 image (or a sprite) and using css to change it's position on hover doesn't work because you end up seeing the image scrolling side-side or up-down.
(FYI, you're correct - the blink occurs because it takes a moment to load your image but the transition has already begun from the moment you hover. After you've hovered once, the image has loaded so it won't happen again until you reload the page.)
Here is a purely HTML and CSS solution:
Create a containing div
Place an anchor tag and image tag within this container
Set a background image on the anchor tag (this should be the image you want displayed on page-load)
The image tag should be the image you want to display on hover and needs a z-index applied to bring it behind your anchor tag
After much experimentation, I arrived at the following solution:
(Demo here: http://jsfiddle.net/jmtFK/)
HTML:
<div class="button" id="specific">
<img>
</div>
CSS:
.button {
position: relative;
}
.button a {
display: block;
width: px;
height: px;
background: url() no-repeat;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.button a:hover {
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.button img {
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.button a:hover + img {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
I initially didn't have my z-indexed image set to transparent and found that the edges of it appeared around the outside of the link image. This was ugly so I applied opacity: 0.
I also added CSS transitions for "hover in" and "hover out". (Basically, the transition settings applied to a certain CSS state dictate how it transitions to that state. eg the transition settings applied to .button a take effect when button a:hover is no longer applicable.
I hope that helps.
I'm setting this style to show animation when element height changes from 0 to 30:
.information-bar { height: 30px; }
.information-bar-collapsed { height: 0; }
.information-bar { background-color: #f9e288; -moz-transition: height 0.3s ease; -webkit-transition: height 0.3s ease; }
But it also show animation when element height changes from 30 to 0. How can I avoid the second animation?
Thanks.
Solved by adding this style:
.information-bar-collapsed { -moz-transition: all 0s ease; -webkit-transition: all 0s ease; }
Now when information bar shows it shows with animation, and when it hides animation does not show.