Safari -webkit-transition-property: анимация масштаба и / или размера фона - PullRequest
Новая
       20

Safari -webkit-transition-property: анимация масштаба и / или размера фона

1 голос
/ 09 марта 2011

Я хотел бы оживить пару div с фоновыми изображениями.Я хочу, чтобы они переместились на страницу и стали больше.

Я делаю это через jQuery, добавляя класс, который, в свою очередь, запускает преобразования CSS3 в Webit.

Я начал с этого: 

.myStyle {
    width: 240px;
    height: 240px;
    top: 200px;
    -webkit-background-size: 240px;
    -webkit-transition-property: top, -webkit-background-size, width, height;
    -webkit-transition-duration: 1s;
}

При добавленииэтот стиль, DIV изменяет ширину и высоту, перемещается в новую верхнюю позицию, но размер фона остается прежним.

Итак, я попробовал это: 

.myStyle {
    top: 200px;
    -webkit-transform: scale(1.5);
    -webkit-transition-property: top, -webkit-transform;
    -webkit-transition-duration: 1s;

}

Но, та же проблема.Верх оживляет, но не масштаб.

Я думаю (надеюсь), что это просто синтаксическая ошибка с моей стороны.Или это просто невозможно перейти свойства -webkit?

1 Ответ

1 голос
/ 09 марта 2011

Первый код не работает, потому что webkit не может анимировать из одной единицы измерения (%) в другое (px).Если вы измените ... 

.myStyle {
    -webkit-background-size: 150%;
}

Это должно оживить, но с 0 до 100%.Я думаю, что во втором примере происходит то же самое.

Я бы пошел об упрощении кода и размещении объявления перехода перед выполнением преобразования.Это позволяет элементу отменить переход, если вы удалите класс.Кроме того, если вы масштабируете вещи равномерно, тогда -webkit-transform: масштаб - это путь. 

#div {
  /*your css*/
  -webkit-transition: all 1s ease;
}

#div.animated {
  -webkit-transform: -webkit-transform: scale(1.5);
}
...