时间戳

首页 > 解决方案 > 有没有办法精细控制 CSS 元素上的动画属性？

css - 有没有办法精细控制 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 ;

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

标签： csscss-transitions

解决方案

是的，您想要的是 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 动画的内容。

推荐阅读