I have a question about SVG background transition problem in Chrome. It works fine & smooth in Firefox, Safari and Internet Explorer but not in Chrome. When I am hovering the button it first shows larger SVG and than it's downgrading to desired size. It's working smooth in all other browsers except Chrome.
Please check :
jfiddle
.button {
background: rgba(0, 0, 0, 0.6)
url('https://cdn.mediacru.sh/b/bnN8POn3lz8M.svg')
top left no-repeat;
background-position: center;
background-size: 100% !important;
width: 200px;
height: 200px;
display: block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.button:hover {
background: rgba(0, 0, 0, 0.9)
url('https://cdn.mediacru.sh/y/ypwpa6pIMXdX.svg')
top left no-repeat;
}
<a class="button" href="#"></a>
This seems to be a bug with the Chrome implementation of new CSS3 Images specification rules for transitioning images.
As #rfornal noted, the original CSS transitions spec did not include background-image as an animatable property. Images would therefore transition immediately, regardless of any transition settings. However, the latest editor's draft of the CSS Images Level 3 spec does define rules for how to transition images. These rules suggest the browser should transition the size of image from one to the other while fading between them.
So far, image transitions have only been implemented in Chrome (and Opera, which uses Chrome's Blink rendering engine), which is why none of the other browsers have any issue.
To prevent Chrome from trying anything fancy with the image transition, explicitly state which properties you want to transition instead of using transition: all.
.button {
background: rgba(0, 0, 0, 0.6)
url('https://cdn.mediacru.sh/b/bnN8POn3lz8M.svg')
top left no-repeat;
background-position: center;
background-size: 100% !important;
width: 200px;
height: 200px;
display: block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
/* reset to only transition the specific properties
you want to change, NOT including background-image */
-webkit-transition-property: background-color, background-position;
transition-property: background-color, background-position;
}
.button:hover {
background: rgba(0, 0, 0, 0.9)
url('https://cdn.mediacru.sh/y/ypwpa6pIMXdX.svg')
top left no-repeat;
}
<a class="button" href="#"></a>
OK ... it's in the transition. When those lines are commented out, it works without a transition, but without the jumpy sizing effect.
Changing the all in the transitions to opacity seems to work in Chrome, but I'm not sure this is the effect you want.
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
Unfortunately, my first attempt at a fix was to animate the background image and you cannot use transition on background-image; see the w3c list of animatable properties.
Related
I have a div that has a css animation transition for it's height when you hover over it. When you also hover over it, the background color change from pink to orange. However, I don't want this background color to change until after my height is done transitioning. Is there a way I can do this? I looked into using transition-delay but it seems that it can only be applied to one transition property? Thanks!
div {
margin: 3rem;
height: 10rem;
width: 10rem;
background: pink;
transition: height 0.3s ease;
}
div:hover {
height: 20rem;
background: orange;
}
<div />
You can specify delays for any property you like:
div {
transition: height 0.3s ease, background 0.3s ease 0.3s;
}
(In this case the last 0.3s defines the delay for the background color, see e.g. on MDN)
I am trying to add a simple ease-in and ease-out effect when you hover over a logo. I know there are posts about this. I've tried many different combinations of CSS, but can't seem to get it to work.
I've successfully changed the logo color by changing the content upon hover with this CSS code:
#dealertrackr-image.et_pb_image:hover {
content: url('image url');
}
When it is hovered over, the logo changes from the black and white state to colored state. I now want this to have a 1s ease-in and ease-out on hover and release of hover. Nothing that I tried worked.
http://www.nationalgalactic.com/divisions/
If all you were hoping for was grayscale, you may also be interested in just loading in the full color image and using a CSS filter to desaturate / resaturate on hover.
This combined with CSS transitions will create a nice little fade:
img {
-webkit-filter: grayscale(100%);
filter: gray; filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
transition: all .25s ease;
}
img:hover {
-webkit-filter: grayscale(0%);
filter: none;
}
*edit
This is a pure CSS solution, but is not fully supported in Android Jellybean, and Internet Explorer. If full browser support is important to you, please see isherwood's answer on this same post. For full support, your solutions are limited to stacked images or javascript.
The only way to do it with images is to stack elements and transition the opacity of the top layer. Browsers don't do image-to-image transitions.
Something like this, where the anchor has a background image:
a {
display: inline-block;
background: url(http://lorempixel.com/400/150/nature) left top no-repeat;
}
a img {
transition: opacity 1s;
}
a:hover img {
opacity: 0;
}
<a href="#">
<img src="http://lorempixel.com/400/150/nature/2" alt="">
</a>
Here's a demo with your code and images.
i have some logos which transition on hover but i've always tested with chrome(yeah i messed up)So I just tested it in ff & ie and it's not working (i have the latest versions)
Here is my fiddle http://jsfiddle.net/r6qZw/
and here is the html
<a id="facebook" href="http://facebook.com"></a>
and the css
#facebook {
float: left;
height: 40px;
width: 40px;
background-image: url(http://i.imgur.com/2lAKpSi.jpg);
background-repeat: no-repeat;
background-position: center center;
-o-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-khtml-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
#facebook:hover {
background-image: url(http://i.imgur.com/L7Jmol5.jpg);
}
I know the solution to this is simple but i just couldn't do it. When i remove the background image and just use a color instead, it works but using background image just stops the animation. I still get the second image but it doesn't transition with an animation. I've also tried giving a parent element (like the famous "ul li a" and such)
Can someone help a noob out?
background-image is not a transitionable property (except for gradients, and that's not supported in Chrome - IE supports it though!)
The fact that Chrome can transition the image for you is simply an extension of the standard. This is evidenced by how horrible it looks if you rapidly move your mouse over and off of it repeatedly - normal transitions are smooth in spite of this, but the image "transition" is horrible.
I have some css that gradually changes the background colour of an element when hovered on and the links below it.
It works perfect in Chrome and IE9+ but in FF it only works on the element you hover on and it instead immediately changes the colour on the elements below
EXAMPLE
I'm guessing the problem lies somewhere here:
.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
What do I need to change/add to get it to work properly in FF
Try setting the same transition on the element(s) below as well.
I'm guessing you want the lines in your example to have the same effect. I've updated the example with this JsFiddle.
Edit:
I added the transition CSS to all classes that handles the border you use to draw the lines
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
I'm trying to make smooth animations on buttons by implementing CSS3's transition properties. The buttons smoothly go from dark green to light green in Firefox, Safari, and Opera (IE doesn't support transitions anyways).
But for some reason, in Chrome, if you hover over one button and then immediately hover over another, the colors seem to lag. Sometimes I get a neon green button, sometimes I get a black button; something happens whenever I run the mouse too fast from one button to the next. Can Chrome just not keep up with the transitions or something?
Barebones code I'm using:
.button {
transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-webkit-transition: background-color 0.2s;
background-color: #466b46;
}
.button:hover {
background-color: #74d06c;
}
Chrome is Version 24.0.1312.56. Any help would be appreciated.
if I clearly understand your problem you want a smooth transition in chrome when you hover a button ?
For that change your code like this :
.button {
transition: background-color linear 0.2s;
-moz-transition: background-color linear 0.2s;
-webkit-transition: background-color linear 0.2s;
background-color: #466b46;
}
.button:hover {
transition: background-color linear 0.2s;
-moz-transition: background-color linear 0.2s;
-webkit-transition: background-color linear 0.2s;
background-color: #74d06c;
}
with this code, if you change the hover over a button, you have also a smooth transition to back to the initials parameters.
I hope that this will help you.