Question

在将transform与keyframes结合使用时，我正在努力实现DRY CSS代码。假设我有以下内容：

HTML

<div id="box"></div>

CSS

#box {
    width:300px;
    height:300px;
    background-color:red;

    animation: animate 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes animate {
    from {
        transform: scale(0.8) translateY(100px) rotate(10deg);
    }
    to {
        transform: scale(0.8) translateY(100px) rotate(-10deg);
    }
}

JSFiddle example

如何阻止在动画中执行scale(0.8)和translateY(100px)？我只希望它来回旋转，而不必在每个步骤的变换中应用这些属性。此处，仅使用了两个步骤（from和to），但是如果使用了多个步骤（例如使用0%，20%，40%，{ {1}}，60%，80%）这意味着会有很多重复的代码。可以想象，如果稍后出现更改，这不是很好。

最终，我正在寻找类似的东西（这是不可能的，因为100%属性将被覆盖）：

transform

这甚至可能吗？

聚苯乙烯。我不是在寻找答案，您可以将#box { transform: scale(0.8) translateY(100px); } @keyframes animate { from { transform: rotate(10deg); } to { transform: rotate(-10deg); } } / width更改为height和/或将scale / margin属性更改为{{ 1}}。 LESS / SASS也没有使值易于更改，因为它仍然会导致重复的代码。

Answer 1

我为您准备了两个选项 - jsFiddle

选项1 - 不干，但更精简：

 #box {
        width:300px;
        height:300px;
        background:red;
        animation: animate 1s ease-in-out 0s infinite alternate;
    }
    @keyframes animate {
        from {
            transform: scale(0.8) translateY(100px) rotate(10deg);
        }
        to {
            transform: scale(0.8) translateY(100px) rotate(-10deg);
        }
    }

选项2 - 技术上干，但不一定“更好”

<div id="option2">
    <div id="box2"></div>
</div>

#option2{
    transform: scale(0.8) translateY(100px);
}
#box2 {
    width:300px;
    height:300px;
    background-color:blue;
    animation: animate2 6s ease-in-out 0s infinite alternate;
}
@keyframes animate2 {
    0%, 40%, 80% {
        transform: rotate(10deg);
    }
    20%, 60%, 100% {
        transform: rotate(-10deg);
    }
}

我猜想使用选项2可能是值得的，如果你使用更复杂的动画，但我不确定是否只是将它包装在一个包含div中并缩放/翻译包含它div会在小范围内提供任何真正的好处。

Answer 2

哇所以我认为必须有一种方法可以做到这一点，而无需为每个关键帧动画重写scale和translateY属性。我尝试了几种不同的东西但是我无法得到你想要的结果。如果参数是新的，似乎变换应该能够接受更多参数而不覆盖旧参数。

我知道你说你不想使用LESS / SASS，因为它在技术上并不干燥，但如果你想在一个地方编码并让它在任何地方更新，我会建议。我会考虑干，因为你没有重复自己（即使代码是）。我想不出任何其他方式来获得你想要的东西。

如何在使用transform＆amp ;;时创建DRY CSS关键帧

2 个答案: