css3 background-size transition animation in Webki

问题:

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 2 years ago.

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/

回答1:

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;

回答2:

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.

回答3:

You just need to change:

-web-kit-transition: background-size 2s ease-in;

to:

-webkit-transition: background-size 2s ease-in;

回答4:

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%; 
}

回答5:

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: ...;

回答6:

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;

回答7:

I know this is a old question, but using "all" works fine for me.

-webkit-transition: all 1s;
transition: all 1s;