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覆盖原始<div class="wrap"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div>。

你可以用另一个div包装这三个div，并给wrap div

提供动画

<强> Working Demo

<强> HTML

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

<强> CSS

{{1}}

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

Answer 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>

这将保留变换的比例分量，同时允许浏览器为平移添加动画效果。对于您的情况，您将为每个类编写一个新的动画，并且可以放弃原始比例尺声明，而使用animation-fill: both

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

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

3 个答案: