I'm creating a link button with a background image sprite, that transitions on :hover. It works great in all browsers except for IE, which seems to reset the transition direction.
See a jsFiddle demo here or a video of IE10 here or see the css inline here:
.button {
background:url('http://blackspike.com/temp/icon-github.svg') 0 0 no-repeat; width: 30px; height: 30px; display: block;
-webkit-transition: background-position 0.3s ease;
-moz-transition: background-position 0.3s ease;
-ms-transition: background-position 0.3s ease;
transition: background-position 0.3s ease;
}
.button:hover {background-position: 0 -30px}
Expected behaviour is for it to smoothly transition up then back down. It's like a Fill behaviour is messed up somehow?
Any help greatly appreciated!
It looks like a bug, where the original background-position is not being remembered correctly to transition back to, or some such.
I don't know the exact reason why IE10 is behaving that way, but you can fix it by explicitly setting the background-position to a non-zero value for the vertical offset value. For example:
.button { background-position: 0 1px; }
http://jsfiddle.net/aZqEa/22/
Related
this question might be obvious but i'm new in css.
I'm animating a shape so when you hover it, it stretches. I've completed the hover on with a nice ease transition but when you move off the mouse the transition doesn't work. Is there a way to make it happen also in the hover off moment?
.shape1{
position: absolute;
background:red
top:512px;
width:180px;
height:140px;
}
.shape1:hover {
height: 160px;
top:492px;
transition: 0.2s ease;
}
Your answer
You have added the transition property on the hover state of the element. Therefore the transition is not applied when you leave the cursor from the element.
.shape1{
position: absolute;
background: red;
top: 512px;
width: 180px;
height: 140px;
transition: .2s ease; /* move this here from :hover */
}
Further information
Besides this you can also add specific properties to the transition. For example, if you only want the height to be animated you could it like this:
.shape1 {
transition: height .2s ease;
/* this inly affects height, nothing else */
}
You can even define different transition-times for each property:
.shape1 {
transition: height .2s ease, background-color .5s linear;
/* stacking transitions is easy */
}
Add the transition before the :hover, so the transition always applies
.shape1 {
transition: 0.2s ease;
}
The :hover selector is used to select elements when you mouse over them.
W3Schools
When you add also transition to your shape1 class it should works
First stackoverflow post, so please forgive if I'm missing something obvious. I did search for an answer first but didn't find one I recognized as relevant.
In this jsfiddle, I have a div that I'm using as a hover target to get some transitions to happen to an <a> element.
http://jsfiddle.net/ramatsu/Q9rfg/
Here's the markup:
<div class="target">Target
<p>.LightMe</p>
</div>
And the css:
body {
background-color: #099;
height: 100%;
width: 100%;
margin-top:200px;
}
.target{
position: absolute;
left: 40%;
height: 100px;
width: 200px;
padding: 20px;
background-color: #ccc;
cursor: pointer;
}
a {
display: block;
position: relative;
padding: 1px;
border-radius: 15%;
}
a.LightMe {
/*Starting state */
background-color: white;
border-style:solid;
border-color:#fff;
top: -120px;
left: -200px;
height: 80px;
width: 80px;
z-index: 10;
opacity: 0;
transition:left 0.55s ease, opacity .5s .7s ease;
-webkit-transition:left 0.55s ease, opacity .5s .7s ease;
-o-transition:left 0.55s ease, opacity .5s .7s ease;
}
.target:hover a.LightMe {
/*Ending state*/
left: 80px;
opacity: 1;
transition:left 0.55s .7s ease, opacity .5s ease;
-webkit-transition:left 0.55s .7s ease, opacity .5s ease;
-o-transition:left 0.55s .7s ease, opacity .5s ease;
}
.target:hover {
transition: background-color 500ms ease;
-webkit-background-color 500ms ease;
-o-background-color 500ms ease;
background-color:#999;
}
Hover over the grey box labeled Target and back off again to see the transitions on the <a> element. It's doing what I want: opacity fades in during position delay, then it slides to the desired position. when moving out of the hover target, the <a> slides to it's original position, then opacity fades back out. All good so far.
The catch is, if the user hovers over the hidden <a> element, it triggers the same set of transitions, which causes all kinds of unintended havoc.
I'd like to prevent any response to a hover directly over the <a> element, and really like to continue to keep it in css if possible.
I tried adding an explicit hover to <a> and .LightMe to override this, to no avail. (Though that could be that I just didn't get the selector syntax right.)
I added the background-color transition to .target intentionally for testing, and it provided an interesting clue: hovering over the <a> triggers the upstream transitions of the .target div. That's about where my brain broke and I decided I'd better seek help.
I'm working with a few things here that are above my head, I just started from the closest thing I could find and worked toward what I needed. This was the starting point jsfiddle (with thanks to the author):
You can start your 'top' position outside of the viewer port and delay the 'top' transition until after your 'left' transition is over. That way the <a> element will not be clickable until the left transition start.
See: http://jsfiddle.net/Q9rfg/4/
Or you can also use this method, combined with the sibling selector as suggested by aorcsik.
Update: another hacky solution is to place a div which is outside, the hover sensitive element, that covers the moving link. Check it out: http://jsfiddle.net/aorcsik/Q9rfg/2/
The problem with my original idea (below) was, that you could not click on the moving link, since it returned to its original position, once you hovered out of the gray box, also the cursor changed over the hidden link.
I would try to get the <a> out of the gray box, put it after, and reference it in css with the sibling selector +.
.mainclass.subclass:hover + a.LightMe {
/* ... */
}
This way it won't trigger the hover effect of the gray box when itself is hovered, and you stay in pure css land.
This would make positioning a bit trickier, here is a fiddle, check it out: http://jsfiddle.net/aorcsik/Q9rfg/1/
I have a simple image swap transition that only works on chrome. the code:
<a class="twitter" href="index.php"></a>
.twitter {
width:26px;
height:26px;
display:block;
background:transparent url('../images/twitter.jpg') center top no-repeat;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.twitter:hover {background-image: url('../images/twitter-hover.jpg');}
demo: http://jsfiddle.net/gWKEQ/17/
It's because only Chrome actually supports animating the background-image CSS property - which is actually incorrect according to the spec, where it's noted as:
background-image
Animatable: no
For more info on what you can animate (also in which browsers etc.), check out this page. In the future, other browsers will hopefully allow animating the background-image property (and the spec will change), since this is something programmers/designers actually want.
this transition works fine on desktop, but on mobile the "hover" event interpreted as a tap on mobile, just makes the image disappear instead of replacing the new image. All other transitions work.
.mark.studio{
background: url(../images/studio_icon.png) no-repeat;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
height: 50px;
width: 50px;
z-index:103 !important;
}
.mark.studio:hover{
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-transition: all .3s ease-in-out;
background: url(../images/studio_icon-hover.png) no-repeat;
}
I don't own an Android phone, only iOS devices, but I do know that the transition property has very scattered support so far, when it comes to images. Like both Firefox and Internet Explorer support the transition code, but not when it is used to ease-in and out an image. I was answering, with another guy, a similar question with the transition property with background images not working, and we all came to the conclusion that it didn't work in a lot of browsers. Oh, I just looked for it, and the post was by you! css3 transform on image hover in firefox . Well that post basically answers your question. :)
It probably won't fix it (but it's nice to try it anyways), it's pointless to repeat the transition property on hover...
I have a menu where the elements have a simple animation on hover, changing background color and text color.
Since the element has a border with outset style, I would like to change it to inset to make it look coming forward. However the transition doesn’t seem to work for the border-style property, so the final effect doesn’t look very well, as the change in border style happens immediately and only later the background changes.
Any ideas how to make this work? I found it strange that border-style can‘t be transitioned. If so, any turnaround?
Here’s the code:
#main_menu a, #main_menu li {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
} /*Hover animation */
#main_menu li:hover { background: #4488CC; border-style: inset; }
#main_menu li {
/*GRAPHICS*/
list-style: none;
border: 3px outset #496181;
margin: 10px;
background: #333;
PS: I don’t want to use jquery for this
Your question may have been hastily written, but I think you're missing an _ in the first selector. Also, it seems that you're animating the border-style from outset to outset, so you won't see any differences. It does indeed work, I've created a demo that changes the border-color on jsfiddle for you to take a look at.
Another solution would be to create the border as a button image and stretch it in the div and just use box-shadow. That way your user will still see a smooth button movement by the transition in the shadow.