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

Я хотел бы анимировать пару 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?


css webkit transitions
person DA.    schedule 09.03.2011    source источник
comment
Общая цитата (на которую я не могу найти ссылку), в которой говорится, что если вы думаете, что нашли ошибку в компиляторе, проверьте свой код еще раз, вы, вероятно, этого не сделали ~ я не думаю, что вы нашли проблему с Webkit, но было бы интересно, если бы вы это сделали.   -  person jcolebrand    schedule 09.03.2011

Ответы (1)


arrow_upward
1
arrow_downward

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

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

Он должен анимироваться, но от 0 до 100%. Похожее происходит и во втором примере, я думаю.

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

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

#div.animated {
  -webkit-transform: -webkit-transform: scale(1.5);
}
person methodofaction    schedule 09.03.2011
comment
это не было первоначальной проблемой ... Я действительно пытаюсь перейти от тех же размеров единицы измерения. я думаю проблема была во мне - person DA.; 09.03.2011