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

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/

- Artem Svirskyi

Answer 1

你对transform属性的理解有误。每个元素只有一个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。

其他答案在包装器

中添加动画是一个很好的解决方案，如果您混淆了所有元素和包装器的transform-origin属性，则应该获得很多灵活性。使用包装器更容易处理复合变换的变化，甚至在某些情况下，每个元素周围都可以优雅地处理包装器。

- Olivier Butler

Answer 2

这是因为你用你的动画覆盖了原来的 transform。

你可以用另一个 div 包裹那三个 div，并给外侧的 div 添加动画。 演示 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;
}

- Surjith S M

---

这并没有对每个元素进行动画处理，而是作为一个整体对包装器进行了动画处理。 - mpd

Answer 3

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

演示

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

- Mohsen Safari