0

I have applied a transform: -webkit-transform: skewY(170deg) on an element. Its working fine. Afterwards, i add to the skewed element a class that animates a scaleOut. This is the animation:

.partialScaleOutAnimation{
    -webkit-animation: partialScaleOut 0.5s;
}

@-webkit-keyframes partialScaleOut {
    0%{
        -webkit-transform: scale(1);
    }

    100%{
        -webkit-transform: scale(0.3);
    }
}

for some reason when applying the animation, the skewed effect disappears. Why?

Richard Parnaby-King
  • 14,703
  • 11
  • 69
  • 129
Vandervidi
  • 642
  • 2
  • 14
  • 32
  • 3
    When you need multiple transforms on an element, they should be provided as space separated in the same property. Within the animation, there is only a scale transform and so the other disappears. – Harry Jan 21 '16 at 14:52
  • I know that. the issue is that i add the transformations in different times – Vandervidi Jan 21 '16 at 15:08
  • Well, my first statement has your solution. You must concatenate any new transform that is added at a later time to the existing transform. There is **no alternate** (unless you want to add extra wrapper elements, apply one transform to the wrapper). – Harry Jan 21 '16 at 15:11
  • 2
    Have a look at these [1](http://stackoverflow.com/questions/30010523/add-a-transform-value-to-the-current-transforms-that-are-already-on-the-element/30010571#30010571), [2](http://stackoverflow.com/questions/34411082/animate-transform-only-one-property-scale-override-other-translate/34412049#34412049), [3](http://stackoverflow.com/questions/32224802/extend-the-final-state-of-the-first-animation-for-translated-element?lq=1). – Harry Jan 21 '16 at 15:16
  • 1
    @Harry You've done your homework, nice. – somethinghere Jan 21 '16 at 15:17

0 Answers0