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

【问题标题】：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/

【问题讨论】：

标签： css css-animations css-transforms

【解决方案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 属性，您应该获得很大的灵活性。使用包装器可以更轻松地处理不断变化的复合转换，在某些情况下，即使是每个元素的包装器也可以优雅地工作。

【讨论】：