变换变换的动画覆盖原有的 [英] transform animation overrides original transform

问题描述

我有3个要素

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

他们每个人都有自己的转型

Each of them has its own transformation

.one{
    -webkit-transform: scale(0.5);
}
.two{
    -webkit-transform: scale(0.8);
}
.three{
    -webkit-transform: scale(0.2);
}

现在我想自己的动画改造翻译不影响规模。

And now I want to animate their translate transformation not affecting scale.

@-webkit-keyframes bounce{
    from{
        -webkit-transform: translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: translate3d(100px, 100px, 0);
    }
}

但这种变换覆盖规模。
我可以用不同的关键帧的每个元素。或包裹每个元素和风格与其父规模变换和使用一个唯一关键帧动画吧。但是，这一切是怎么样的猫腻。有没有更好的解决办法？

But this transform overrides scale. I could use different keyframes for each element. Or wrap each element and style its parent with scale transform and use one only keyframes to animate it. But this all is kind of tricky. Is there a better solution?

http://jsfiddle.net/422t2/

推荐答案

尝试动画添加到每个元素和动画容器：

try to add animation to each element and animation to the container:

DEMO

HTML

<div class="container">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
</div>

CSS

@-webkit-keyframes bounce{
    from{
        -webkit-transform: translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: translate3d(100px, 100px, 0);
    }
}

@-webkit-keyframes scale1{
    from{
        -webkit-transform: scale(1);
    }
    to{
        -webkit-transform: scale(0.5);
    }
}
@-webkit-keyframes scale2{
    from{
        -webkit-transform: scale(1);
    }
    to{
        -webkit-transform: scale(0.8);
    }
}
@-webkit-keyframes scale3{
    from{
        -webkit-transform: scale(1);
    }
    to{
        -webkit-transform: scale(0.2);
    }
}

这篇关于变换变换的动画覆盖原有的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！