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.
Related
I have two transitions on the same element out of which one works as expected, but the other one doesn't work on hover. What can I do to get both the transitions working?
CSS CODE:
.ArrowNext
{
top:40%;
right:14%;
background:rgba(0,0,0,0.7);
width:200px;
height:200px;
position:absolute;
cursor:pointer;
transition: right 1s; /* Wont work*/
transition: background 1s;
}
.ArrowNext:hover
{
right:11%; /* Wont work*/
background:rgba(255,255,255,0.7);
}
Your second declaration is overriding the first.
Instead of declaring multiple transitions separately, you declare them together:
transition : right 1s ease-out, background 1s ease-out;
You should play with easing methods as well. They can really change the "feel" of the animation.
Also, don't forget about vender prefixes:
-webkit-transition : right 1s ease-out, background 1s ease-out;
-moz-transition : right 1s ease-out, background 1s ease-out;
-o-transition : right 1s ease-out, background 1s ease-out;
transition : right 1s ease-out, background 1s ease-out;
Here is some great documentation on transitions: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
And since you're new to CSS you should check-out http://caniuse.com, it's a great resource for determining browser compatibility.
moving image after hover
with chrome only!
see my page in google chrome browser: http://qass.im/teeny/
now hover all images..
Why moving image after hover?
.pin img{
width: 100%;
max-width:100%;
height:auto;
border-radius:3px 3px 0 0;
display:block;
opacity:0.5;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.pin img:hover{
opacity:1;
}
thanks.
Because of differ in image resizing algorithms (btw on my machine image center is "moved" in firefox), but not in chrome) - try to use an image of exact size you use in column 258x181px - in that case it wouldn't be resized by a browser and an effect of moving will dissappear.
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/
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...
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
Animating the background-size property doesn't seem to be working in Chrome or Safari.
div {
width: 161px;
height: 149px;
background: url(http://3.bp.blogspot.com/_HGPPifzMEZU/Rw4ujF12G3I/AAAAAAAAAWI/bc1ppSb6eKA/s320/estrelas_09.gif) no-repeat center center;
background-size: 50% 50%;
transition: background-size 2s ease-in;
-moz-transition: background-size 2s ease-in;
-web-kit-transition: background-size 2s ease-in
}
div:hover {
background-size: 100% 100%
}
<div>
hey
</div>
http://jsfiddle.net/ubcka/14/
You should check the browser version and whether it supports both background-size and transition. If the former, but not the latter use:
transition: background-size 2s ease-in;
-moz-transition: background-size 2s ease-in;
-ms-transition: background-size 2s ease-in;
-o-transition: background-size 2s ease-in;
-webkit-transition: background-size 2s ease-in;
It's not widely supported. See a complete list of CSS properties that support transition here. I would have a different approach. Wrap your element with background-color you wanted to do transition to, and do a scale transition for your element.
<div class="your-wrapper">
<div class="your-div">
</div>
</div>
also make sure to add proper styling
.your-wrapper {
overflow:hidden
}
.your-div {
transition: transform 0.5s;
-webkit-transition: -webkit-transform 0.5s
}
.your-wrapper:hover .your-div{
transform: scale(1.5); -webkit-transform: scale(1.5);
}
This should do.
you need to set the background-size on the div otherwise it dosn't have a set size to animate from.
.div {
background-size: 100%; //set the original size!!!!!!!!!!!!
-webkit-transition: background-size 2s ease-in;
transition: background-size 2s ease-in;
}
.div:hover {
background-size: 110%;
}
You just need to change:
-web-kit-transition: background-size 2s ease-in;
to:
-webkit-transition: background-size 2s ease-in;
Change -web-kit- to -webkit-.
Also, you should write original CSS property after properties with a vendor-prefix (it's very important). Otherwise, if browser has implemented that CSS3 property (like transition), then original property will be replaced by property with vendor-prefix — and that is not good.
WRONG order:
transition: ...;
-webkit-transition: ...;
RIGHT order:
-webkit-transition: ...;
transition: ...;
You can also just change all the transition declarations to read like this (it's not the background but the background-size that is changing:
transition: background-size .4s ease-in-out;
I know this is a old question, but using "all" works fine for me.
-webkit-transition: all 1s;
transition: all 1s;