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

我有三个元素，每个元素都有自己的变换，我想为它们的平移变换设置动画，而不影响比例：

.one{
-webkit变换：比例（0.5）；
}
.二{
-webkit变换：比例（0.8）；
}
.三{
-webkit变换：比例（0.2）；
}
@-webkit关键帧反弹{
从{
-webkit转换：translate3d（0,0,0）；
}
到{
-webkit转换：translate3d（100px，100px，0）；
}
}

test1
测试2
test3这是因为您正在用动画中的变换覆盖原始的变换

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


HTML

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

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

尝试向每个元素添加动画，并向容器添加动画：


HTML

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

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

您认为转换属性是错误的。每个元素都有一个变换属性，可以使用每个元素的动画重置该属性。您需要编写如下动画：


.one{
变换：比例（0.5）；
动画：反弹1s轻松1s无限交替；
}
.二{
变换：比例（0.5）
}
@关键帧反弹{
从{
变换：缩放（0.5）平移3D（0,0,0）；
}
到{
变换：缩放（0.5）平移3d（100px，100px，0）；
}
}
test1
测试2
test3
这不会为每个元素设置动画，而是将包装器作为一个整体设置动画