Question

我有这段代码：

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 ;

我查看了短手属性，但找不到合适的组合。

Answer 1

是的，你想要的是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
}

您可以使用from和to来定义关键帧：

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

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

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

如果使用关键帧作为百分比，您也可能不需要立方贝塞尔计时功能。

我建议您阅读一下css动画HERE。

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

1 个答案: