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

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 属性的理解是错误的。每个元素都有一个变换属性，您可以使用每个元素的动画重置它。你需要像这样写一个动画:

.one{
    transform: scale(0.5);
    animation: bounce 1s ease 1s infinite alternate;
}

.two{
    transform: scale(0.5)
}

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

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

这会保留变换的比例分量，同时允许浏览器为平移设置动画。在您的情况下，您将为每个类编写一个新动画，并且可以放弃原始比例声明以支持 animation-fill: both

这里的其他答案将动画添加到包装器 div，这是一个很好的解决方案，如果您弄乱了所有元素的 transform-origin 属性，并且包装器你应该有很大的灵 active 。使用包装器可以更轻松地处理不断变化的复合转换，在某些情况下，即使是每个元素的包装器也可以优雅地工作。