使用transform&；时如何创建干CSS；关键帧

我试图在使用

变换

与

关键帧

结合使用时实现CSS代码。假设我有以下几点：

HTML

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

如何防止在动画中执行

缩放（0.8）

和

translateY（100px）

？我只希望它能够前后旋转，而不必在变换中为每一步应用这些属性。这里只使用两个步骤（

从

和

到

），但如果使用多个步骤（例如

0%

，

20%

，

40%

，

60%

，

80%

，

100%

），则意味着大量重复的代码。正如您可以想象的，当更改稍后出现时，这不是很好

最终，我要寻找类似这样的东西（这是不可能的，因为

transform

属性将被覆盖）：

这可能吗

---

注：我不是在寻找将

宽度

/

高度

更改为

比例

和/或将

边距

/

顶部

属性更改为

翻译

的答案。同样，使用更少的/sas也不会使值易于更改，因为它仍然会导致代码重复。

哇，所以我认为肯定有一种方法可以做到这一点，而不必为每个关键帧动画重新编写缩放和平移属性。我尝试了几种不同的方法，但没有得到你想要的结果。似乎transform应该能够接受更多的参数，如果参数是新的，则不会覆盖旧的参数

---

我知道你说过你不想少用/SASS，因为它在技术上并不枯燥，但如果你希望在一个地方编写代码，并让它在任何地方更新，我建议你这样做。我认为它是干燥的，因为你不重复自己（即使代码是）。我想不出任何其他方法来满足您的需求。

我为您提供了两种选择-

选项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技术上干燥，但不一定“更好”

#选择2{
变换：缩放（0.8）平移（100px）；
}
#框2{
宽度：300px；
高度：300px；
背景颜色：蓝色；
动画：动画2 6s缓进缓出无限交替；
}
@关键帧动画2{
0%, 40%, 80% {
变换：旋转（10度）；
}
20%, 60%, 100% {
变换：旋转（-10度）；
}
}

---

如果您使用的是更复杂的动画，我想使用选项2可能是值得的，但我不确定仅仅将其包装在包含

div

中并缩放/转换包含

div

是否会在小范围内提供任何实际好处。

首先，感谢您的努力。很遗憾听到你和我得出了相同的结论，但我还是希望有更好的方法。虽然我对这个解决方案不是100%满意，但我现在明白，一个合适的解决方案根本不可能。然而，在我的情况下，您的第二个选项更好，因为不需要复制粘贴。非常感谢@谢谢，老实说，这是我第一次看到干的概念。我可能会在我的网站上用它来重复一些风格。

#box {
    transform: scale(0.8) translateY(100px);
}

@keyframes animate {
    from {
        transform: rotate(10deg);
    }
    to {
        transform: rotate(-10deg);
    }
}

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

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