web-dev-qa-db-ja.com

Webkitのcss3バックグラウンドサイズのトランジションアニメーションが機能しない...バグ？または間違った構文ですか？

Background-sizeプロパティのアニメーションは、Chromeまたは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/

csscss3css-transitions
23
j-man86

ブラウザのバージョンと、ブラウザが両方をサポートしているかどうかを確認する必要がありますbackground-sizeおよびtransition。前者は使用するが、後者は使用しない場合：

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;
18
Brett Pontarelli

広くサポートされていません。移行をサポートするCSSプロパティの完全なリストを参照してください here 。別のアプローチがあります。移行したいbackground-colorでエレメントをラップし、エレメントのスケール移行を行います。

<div class="your-wrapper">
  <div class="your-div">

  </div>   
</div>

また、適切なスタイリングを追加してください

.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);
}

これでうまくいくはずです。

20
thednp

あなただけを変更する必要があります：

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

に：

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

divにbackground-sizeを設定する必要があります。設定しないと、アニメーション化するための設定サイズがありません。

.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%; 
}
6
Jess

変化する -web-kit-から-webkit-。

また、プロパティの後にベンダープレフィックスを付けて元のCSSプロパティを記述する必要があります（非常に重要です）。それ以外の場合、ブラウザがそのCSS3プロパティ（transitionなど）を実装している場合、元のプロパティはベンダープレフィックスを持つプロパティに置き換えられますが、これは良くありません。

間違った順序：

transition: ...;
-webkit-transition: ...;

右の順序：

-webkit-transition: ...;
transition: ...;
3
Creamov