L'animazione di transizione in background-css3 in Webkit non funziona ... Bug? O sintassi sbagliata?

Question

L'animazione della proprietà in background non sembra funzionare in Chrome o 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/

Answer 1

È necessario verificare la versione del browser e se supporta entrambi background-size e transition. Nel primo caso, ma non il secondo uso:

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; 

Answer 2

È anche possibile modificare tutte le dichiarazioni di transizione per leggere in questo modo (non è lo sfondo, ma lo sfondo di dimensioni che sta cambiando:

transition: background-size .4s ease-in-out; 

Answer 3

Hai solo bisogno di cambiare:

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

a:

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

Answer 4

Non è ampiamente supportato. Consulta l'elenco completo delle proprietà CSS che supportano la transizione here. Avrei un approccio diverso. Avvolgi il tuo elemento con background-color a cui desideri eseguire la transizione e esegui una transizione di scala per il tuo elemento.

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

    </div> 
</div> 

anche fare in modo di aggiungere uno stile adeguato

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

Questo dovrebbe fare.

Answer 5

Modifica -web-kit- a -webkit-.

Inoltre, è necessario scrivere la proprietà CSS originale dopo le proprietà con un prefisso del venditore (è molto importante). Altrimenti, se il browser ha implementato la proprietà CSS3 (come transition), la proprietà originale verrà sostituita dalla proprietà con prefisso del fornitore e ciò non è positivo.

ordine sbagliato:

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

giusto ordine:

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

Answer 6

è necessario impostare lo sfondo a grandezza naturale sul div altrimenti dosn't avere una dimensione insieme per animare a partire dal.

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

Answer 7

So che questa è una domanda vecchia, ma l'utilizzo di "tutto" funziona correttamente.

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