有没有办法对CSS元素的动画属性进行粒度控制？

我有以下代码：

transition: all 0.35s;
transition-delay: 0.25s;
transition-timing-function: cubic-bezier(.79,0,.46,1);

但如果我添加更多想要设置动画的属性，结果会出现问题，所以我希望做一些类似的事情：

transition: transform 0.35s/*duration*/ 0.25s /*delay*/ cubic-bezier(.79,0,.46,1),
            opacity 0.25s/*duration*/ 1s /*delay*/ ease-in ;

---

我查看了速记属性，但找不到正确的组合。

是的，您想要的是css动画，而不是css转换。过渡用于创建从一种状态到另一种状态的平滑过渡，而动画允许您通过更改css属性来定义更复杂的行为

它看起来像这样：

element {
  animation-name: yourAnimationName;
  animation-timing-function: cubic-bezier(.79,0,.46,1);
  animation-delay: 0.25s;
}

@keyframes yourAnimationName {
   // here you define which css properties to animate
}

可以使用“从”和“到”定义关键帧：

@keyframes yourAnimationName {
    from { background-color: red; }
    to { background-color: yellow; }
}

或者可以使用百分比定义多个关键帧（占整个动画的百分比）：

如果使用关键帧作为百分比，则可能不需要立方贝塞尔计时函数

---

我建议您阅读一些css动画。

立方体贝塞尔与变换计时功能一样先进。如果你想要更多，你必须求助于@keyframes（css动画），如果你想要更多，还有很多不错的javascript库。比如，或者当你需要全力以赴的时候。我个人认为，所有这些都比纯css动画更容易使用（而且更不冗长）（bounce只为您创建css动画），但我认为如果您熟悉javascript，它确实会有所帮助。啊，当然有，但我希望有一个更……优雅的方法。

@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}