为什么我的变换动画会覆盖原始变换？

Question

我有三个元素,每个元素都有自己的变换,我想为它们的转换变换设置动画而不影响比例:

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

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

<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>

但这种转变超越了规模.我可以为每个元素使用不同的关键帧.或者使用缩放变换包装每个元素并为其父级设置样式,并使用仅一个关键帧为其设置动画.但这一切都有点棘手.有更好的解决方案吗？

http://jsfiddle.net/422t2/

Answer 1

这是因为您transform用动画中的内容覆盖了原始内容。

您可以用另一个 div 包裹这三个 div 并为包裹 div 提供动画

工作演示

超文本标记语言

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

CSS

.wrap {
    -webkit-animation: bounce 1000ms infinite alternate;
}