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

Posted 2023-03-05

【中文标题】为啥我的变换动画会覆盖我的原始变换？

【英文标题】：Why does my transform animation override my original transform?为什么我的变换动画会覆盖我的原始变换？

【发布时间】：2014-01-14 01:48:33

【问题描述】：

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

.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/

【参考方案1】：

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

你可以用另一个 div 包裹这三个 div 并为包裹 div 赋予动画

Working Demo

HTML

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

CSS

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

【讨论】：

这不会为每个元素设置动画，而是将包装器作为一个整体进行动画处理

【参考方案2】：

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

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);
    

【参考方案3】：

您认为 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>

这会保留变换的比例组件，同时允许浏览器对翻译进行动画处理。在你的情况下，你会为​​每个类编写一个新的动画，并且可以放弃原来的 scale 声明以支持animation-fill: both

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