CODEWITHSUNDEEP
cssanimationtransformcss-animations
equivalent8
equivalent8

Reputation: 14227

transform scale element when keyframe animation applied to it

I have an element that has css3 animation with keyframes applied to it but still I want to scale this element. But it seems that because transform translate is already applied in the animation transform scale is not working

e.g.: let say I have 4 clouds (div elements) moving from right to left, I want those clouds to be different scales

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

animation works well, scale not

question: anyone got an ide how to enforce the scale ?

I'm using this example http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background but tweeking it a bit (see the keyframe difference)

Upvotes: 0

Views: 4512

Answers (1)

Ryan Wheale
Ryan Wheale

Reputation: 28380

When setting a CSS property, you must set the complete value for the property. So in your example you are wanting to set the TRANSFORM property with multiple types of transforms (translateX and scale). You must set ALL transforms on a single property. Remove the current SCALE styles, and do the following (with vendor prefixes). Yes... you will have duplication. This is a shortcoming of complex CSS3 property values.

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

To expand on this more, if you had an element with multiple background images:

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

and you wanted to change img2.png to img3.png on hover, you would have to:

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

Upvotes: 3

Related Questions