Css3 анимация перехода размера фона в Webkit не работает... Ошибка? Или неправильный синтаксис?

Анимация свойства 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>

Ответы

Ответ 1

Вы должны проверить версию браузера и поддерживает ли он как 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;

Ответ 2

Он не получил широкого распространения. Полный список свойств CSS, поддерживающих переход здесь. У меня был бы другой подход. Оберните свой элемент с помощью 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);
}

Это должно быть сделано.

Ответ 3

Вам просто нужно изменить:

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

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

Ответ 4

Измените -web-kit- на -webkit-.

Кроме того, вы должны написать исходное свойство CSS после свойств с префиксом поставщика (это очень важно). В противном случае, если браузер реализовал это свойство CSS3 (например, transition), исходное свойство будет заменено свойством с префиксом поставщика - и это не хорошо.

НЕПРАВИЛЬНЫЙ порядок:

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

ПРАВО порядок:

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

Ответ 5

вам нужно установить размер фона на div, иначе у него не будет установлен размер для анимации.

.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

Вы также можете просто изменить все декларации перехода, чтобы читать как это (это не фон, а размер фона, который меняется:

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

Ответ 7

Я знаю, что это старый вопрос, но использование "все" отлично подходит для меня.

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