css3 background-size übergang Animationen in Webkit funktioniert nicht... Bug? Oder falsche syntax?

Animation der background-size-Eigenschaft scheint nicht zu funktionieren, in Chrome oder Safari.

CSS:

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

HTML:

<div>
hey
</div>

http://jsfiddle.net/ubcka/14/

Wie jetzt, die Geige scheint zu funktionieren in Chrome 31.

InformationsquelleAutor j-man86 | 2012-01-20

18

Sollten Sie die browser-version und ob es unterstützt sowohl background-size und transition. Wenn die erstere, aber nicht letztere verwenden:
```
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;
```
- Die Präfixe waren es in seine ursprüngliche Frage und seine Geigen. Ich bin mir nicht sicher, warum er entfernt Sie.
- vergessen Sie nicht -ms-transition: (für IE10 kommen)
- Danke. Ich denke, animieren von background-size wird nur unterstützt in firefox
- Es ist Hinzugefügt und vielen Dank für das heads-up.
- Was meinst du damit Sie "die Annahme, Animation background-size wird nur unterstützt in firefox"? Beachten Sie, dass Sie post von Geige und Sie haben -web-kit- werden sollte -webkit-.
- Ich habe gesehen, bessere Ergebnisse mit background (ohne Größe) als Eigentum.
InformationsquelleAutor Brett Pontarelli
20

Es ist nicht allgemein unterstützt. Hier finden Sie eine komplette Liste der CSS-Eigenschaften, die Unterstützung übergang hier. Ich würde einen anderen Ansatz. Wickeln Sie Ihr element mit background-color Sie das tun wollten übergang zu, und machen Sie einen scale-übergang für Ihr element.
```
<div class="your-wrapper">
  <div class="your-div">

  </div>   
</div>
```
auch stellen Sie sicher, dass Sie richtige 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);
}
```
Sollte dies tun.
- hey, lustig, und du bist bei richtig. es funktioniert in webkit, obwohl.
- Eigentlich ist die Angabe scheint nicht "up to date". background-size nicht unterstützt animation, zumindest in Firefox. Mehr detail: stackoverflow.com/a/23386830/1816603
- Naja, meine Lösung ist cross-browser, zumindest mit jedem modernen browser HTML5, IE9+.
InformationsquelleAutor thednp

Brauchen Sie nur zu ändern:

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

zu:

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

InformationsquelleAutor Greg

müssen Sie die hintergrund-Größe auf das div-sonst ist es somit nicht eine Feste Größe zu animieren, aus.

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

InformationsquelleAutor Jess

3

Ändern -web-kit- zu -webkit-.

Außerdem sollten Sie schreiben, die original-CSS-Eigenschaft nach Eigenschaften mit vendor-Präfix (es ist sehr wichtig). Ansonsten, wenn der browser implementiert hat, dass die CSS3-Eigenschaft (wie transition), dann original-Grundstück ersetzt wird, die durch die Eigenschaft mit vendor-Präfix — und das ist nicht gut.

FALSCHEN Reihenfolge:
```
transition: ...;
-webkit-transition: ...;
```
RICHTIGEN Reihenfolge:
```
-webkit-transition: ...;
transition: ...;
```
InformationsquelleAutor Creamov
-1

Sie können auch einfach ändern Sie alle den übergang Erklärungen zu Lesen, wie diese (es ist nicht der hintergrund, sondern das hintergrund-Größe ändern:
```
transition: background-size .4s ease-in-out;
```
- Dank fordareh, aber noch nicht produzieren jede animation
InformationsquelleAutor fordareh
-1

Ich weiß, das ist eine alte Frage, aber mit "alle" funktioniert gut für mich.
```
-webkit-transition: all 1s;
transition: all 1s;
```
- Gut, das war ein browser-support-Problem, nicht um die Schreibweise, auch wenn Ihre Antwort sollte funktionieren, es ist nicht wirklich spezifisch genug
- Ich weiß, dass ist nicht spezifisch, aber es ist eine alternative, die mich nie im Stich gelassen .
InformationsquelleAutor K. Bert

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.