трансформировать элемент масштаба, когда к нему применяется анимация ключевого кадра

У меня есть элемент, к которому применена анимация css3 с ключевыми кадрами, но я все же хочу масштабировать этот элемент. Но кажется, что, поскольку transform translate уже применяется в анимации, transform scale не работает.

например: скажем, у меня есть 4 облака (элементы div), движущиеся справа налево, я хочу, чтобы эти облака были разных масштабов

.x1 {
  -webkit-animation-name: moveclouds;
  -moz-animation-name: moveclouds;
  animation-name: moveclouds;

  -webkit-animation-duration: 170s;
  -moz-animation-duration: 170s;
  animation-duration: 170s;

  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-transform: scale(0.79);
  -moz-transform: scale(0.79);
  -ms-transform: scale(0.79);
  -o-transform: scale(0.79);
  transform: scale(0.79);
}
.x2{ ...}
.x3{...}
.x4{...}

@keyframes moveclouds {
  from {
    transform: translateX(2400px);
    /* note: I'm using vendor prefixes, I just want to simplified it here */
  }

  to {
    transform: translateX(-200px);
  }
}

анимация работает хорошо, масштаб нет

вопрос: у кого-нибудь есть идея, как обеспечить соблюдение масштаба?

Я использую этот пример http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background, но немного подправил (см. разницу в ключевых кадрах)


animation css css-animations transform
person equivalent8    schedule 28.12.2012    source источник
comment
Я пытался даже переместить часть шкалы в другой класс .y1 или id # y1, все равно не работает   -  person equivalent8    schedule 29.12.2012

Ответы (1)


arrow_upward
3
arrow_downward

При настройке свойства CSS необходимо установить полное значение свойства. Итак, в вашем примере вы хотите установить свойство TRANSFORM с несколькими типами преобразований (translateX и scale). Вы должны установить ВСЕ преобразования для одного свойства. Удалите текущие стили SCALE и выполните следующие действия (с префиксами поставщиков). Да... у вас будет дублирование. Это недостаток сложных значений свойств CSS3.

@keyframes moveclouds {
  from {
    transform: translateX(2400px) scale(0.79);
    /* note: I'm using vendor prefixes, I just want to simplified it here */
  }

  to {
    transform: translateX(-200px) scale(0.79);
  }
}

Чтобы расширить это, если у вас есть элемент с несколькими фоновыми изображениями:

.some-div {
    background-image: url("img1.png"), url("img2.png");
}

и вы хотели изменить img2.png на img3.png при наведении, вам нужно было бы:

.some-div:hover {
    background-image: url("img1.png"), url("img3.png");
}
person Ryan Wheale    schedule 29.12.2012
comment
да, это сработало, но хм, я могу поклясться, что я пробовал это и вчера, и это не сработало, да ладно, поздние часы непродуктивны, спасибо - person equivalent8; 29.12.2012