编写CSS转换的最简洁方法

有没有更简洁的方法来编写以下代码？

element{
    transition: all 700ms linear,
        transform 700ms cubic-bezier(0.4, 0.25, 0.14, 1.5),
        background 700ms cubic-bezier(0.4, 0.25, 0.14, 1.5);
}

---

我要做的是对变换和背景属性应用不同的过渡时间函数，而对其余属性使用线性函数。这是正确的，但我正在努力保持它尽可能干燥。

就我的CSS知识而言（在快速搜索之后），您当前的方法是做您想要的事情的最短（因此也是最“干燥”）的方法。当然，我不是CSS大师，所以我可能完全错了。

在这里你做不了什么。您可以单独指定转换持续时间：

element{
    transition: all linear,
        transform cubic-bezier(0.4, 0.25, 0.14, 1.5),
        background cubic-bezier(0.4, 0.25, 0.14, 1.5);
    transition-duration: 700ms;
}

但仅此而已。由于逗号分隔的过渡值的工作方式，您不能只指定一次自定义曲线。整个值列表按照指定的顺序重复，而不是无限重复最后一个值

也就是说，如果您这样做：

element{
    transition-property: all, transform, background;
    transition-duration: 700ms;
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5);
}

所发生的情况是，

过渡时间函数

的缺失值被填充为

线性

，而不是您的自定义曲线。结果将与

背景的预期转换不匹配

如果您试图通过更改过渡属性的顺序来利用这一点，例如，
background
缺少的值会出现在自定义曲线上：

element{
    transition-property: transform, all, background;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(0.4, 0.25, 0.14, 1.5), linear;
}

发生的情况是，
all
转换将覆盖
transform
转换，即使您单独指定了它，因为
all
稍后出现，并且它包含任何以前列出的属性。
嗯，最简单的方法是使用类似SASS的东西并编写一个mixin，然后使用它，而不是到处复制粘贴代码。我要提出的另一个建议是避免使用
all
，而是通过线性变换枚举您希望设置动画的属性。虽然这可能会更加冗长，但我敢打赌它的性能会更高，特别是如果您曾经在元素的样式中添加过像
box shadow
这样的图形化要求的东西

因此，虽然你的方法可行，但我觉得你的转换越独特，这个公式就越有价值：

element {
    transition-duration: 2s;
    transition-property: all, background, transform;
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14, 1.5);
}

当然，我建议枚举属性，以避免昂贵和未经请求的动画。在这种情况下，类似这样的事情更有意义：

element {
    transition-duration: 2s;
    transition-property: height, background, transform, width;
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14,1.5), linear;
}

编辑：正如@BoltClock提到的，我在这篇粗体文章下面的所有内容上都错了，所以请忽略它。逗号分隔的参数将按照最初指定的顺序再次应用-对于附加的
转换属性
值，第一个和最后一个参数都不会重复。我仍然认为我所说的关于不使用
all
的内容对于性能和未来的范围确定非常重要

请注意我对参数的排序方式：如果
转换属性
的参数多于
转换计时函数
，则所有额外的属性将默认为
转换属性
列出的第一个值作为其默认值。因此，首先输入一个
线性
（默认）值，然后枚举所有唯一的计时函数以匹配正确的属性，然后修改到末尾的任何属性（如
宽度
）将自动默认为
线性
！因此，即使在属性列表的末尾再添加5个属性，也只有
background
和
transform
具有其独特的
cubic bezier
计时功能。例如：

element {
    transition-duration: 2s;
    transition-property: height, background, transform, width, oneProp, twoProp, threeProp, etcProp;
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14,1.5);
}

上述所有内容均使用
线性
定时功能，但
背景
和
变换
除外。我觉得这是性能和干CSS之间的一个很好的折衷。我制作了一个JSFIDLE供您查看各种选项-注释不同的CSS以尝试每种方法：

“DRY”=“不要重复你自己。”@AnupamBasak在这种特殊情况下，这意味着避免重复立方贝塞尔公式和持续时间。将持续时间移到外部的好方法！回答得好！To：这是一个完全有效的答案（尽管看起来可能不是那么立即），因为问题问“写这篇文章的最简洁方式是什么”，答案是“你有最简洁的方式”。事实上，正如我在回答中提到的，值列表将按指定的顺序重复。规范中规定了这一点：它既不接受第一个值也不接受最后一个值，而是在其余的转换中重复它。但是是的，到目前为止，你能做的最有效的事情就是尽可能避免使用
all
。将编辑。