使用秒而不是百分比来表达CSS3 @keyframes [英] Expressing CSS3 @keyframes using seconds instead of percentages

问题描述

我在2016年1月学习了CSS3 @keyframes 语法，两年后，我现在发现自己在使用 @keyframes 动画在我的工作量中不多（比CSS3过渡复杂，比基于javascript的动画更麻烦）。

I learned CSS3 @keyframes syntax in January 2016 and, over 2 years later, I now find myself using @keyframes animations in no small amount of my work (more sophisticated than CSS3 transitions, less cumbersome than javascript-based animations).

我真正想念的一件事是该功能以秒为单位表示 @关键帧而不是百分比。有什么技巧可以实现这一目标吗？

One thing I really miss though is the ability to express @keyframes in seconds rather than in percentages. Are there any hacks to achieve this?

我知道我可以使用以下 100s 技巧来循环显示彩虹的颜色，每3秒循环一次：

I know I can use the following 100s hack to cycle through rainbow colors, with one cycle every 3 seconds:

div {
    width: 120px;
    height: 120px;
    background-color: violet;
    animation: myAnimation 100s;
}

@keyframes myAnimation {
    0% {background-color: red;}
    3% {background-color: orange;}
    6% {background-color: yellow;}
    9% {background-color: green;}
   12% {background-color: cyan;}
   15% {background-color: blue;}
   18% {background-color: violet;}
  100% {background-color: violet;}
}

<div></div>

但这意味着动画在（有效）完成后仍在运行82秒（尽管无法察觉）。

But it means that the animation is still running (albeit imperceptibly) for another 82 seconds after it has (effectively) finished. Amongst other concerns, this puts multiple iterations out of reach.

我真正想写的只是：

@keyframes myAnimation {

  0s {background-color: red;}
  3s {background-color: orange;}
  6s {background-color: yellow;}
  9s {background-color: green;}
 12s {background-color: cyan;}
 15s {background-color: blue;}
 18s {background-color: violet;}
}

有没有更好的方法

事后看来，我可能已经使上面的示例太简单了，因为它涉及到对单个元素进行动画处理，而我的问题最初来自于想要使多个元素彼此同步进行动画处理。

I realise in hindsight I have probably made the example above too simple given that it involves animating a single element and my question originally emerges from wanting to animate multiple elements in sync with each other.

因此，这是一个稍微复杂的示例，它显示了一个更接近导致我的问题排在第一位：

So, here is a slightly more elaborate example, showing a set-up much closer to the one which gave rise to my question in the first place:

div {
display: inline-block;
width: 48px;
height: 48px;
margin-right: 6px;
}

div:nth-of-type(1) {
background-color: red;
}

div:nth-of-type(2) {
background-color: orange;
animation: myAnimationOrange 100s;
}

div:nth-of-type(3) {
background-color: yellow;
animation: myAnimationYellow 100s;
}

div:nth-of-type(4) {
background-color: green;
animation: myAnimationGreen 100s;
}

div:nth-of-type(5) {
background-color: cyan;
animation: myAnimationCyan 100s;
}

div:nth-of-type(6) {
background-color: violet;
animation: myAnimationViolet 100s;
}

@keyframes myAnimationOrange {
    0% {background-color: white;}
    1% {background-color: white;}
    2% {background-color: orange;}
  100% {background-color: orange;}
}

@keyframes myAnimationYellow {
    0% {background-color: white;}
    2% {background-color: white;}
    3% {background-color: yellow;}
  100% {background-color: yellow;}
}

@keyframes myAnimationGreen {
    0% {background-color: white;}
    3% {background-color: white;}
    4% {background-color: green;}
  100% {background-color: green;}
}

@keyframes myAnimationCyan {
    0% {background-color: white;}
    4% {background-color: white;}
    5% {background-color: cyan;}
  100% {background-color: cyan;}
}

@keyframes myAnimationViolet {
    0% {background-color: white;}
    5% {background-color: white;}
    6% {background-color: violet;}
  100% {background-color: violet;}
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

推荐答案

别忘了您可以在同一个元素上运行多个动画，并且可以设置其持续时间，延迟和所有其他 animation -... 规则。

Don't forget you can run multiple animations on the same element, and that you can set their duration, delay and all other animation-... rules independently.

例如，您可以拆分所有关键帧到单键@keyframes规则。

然后很容易控制它们何时插入并链接它们。

E.g, you can split all your keyframes to single-key @keyframes rules.
Then it's easy to control when they'll kick in and to chain them.

div {
    width: 120px;
    height: 120px;
    background-color: violet;
    animation-fill-mode: forwards;
    animation-name: orange, yellow, green, cyan, blue, violet;
    animation-delay: 0s, 3s, 6s, 9s, 12s, 15s, 18s;
    animation-duration: 3s; /* same for all */
}

@keyframes orange {
    to { background-color: orange; }
}
@keyframes yellow {
    to { background-color: yellow; }
}
@keyframes green {
    to { background-color: green; }
}
@keyframes cyan {
    to { background-color: cyan; }
}
@keyframes blue {
    to { background-color: blue; }
}
@keyframes violet {
    to { background-color: violet; }
}

<div></div>

在这种情况下，您甚至不需要在同一元素上组合多个动画，而只需相应地设置 animation-delay ：

In this case, you don't even need to combine multiple animations on the same element, but simply set the animation-delay accordingly:

div {
 /* same for all */
    width: 60px;
    height: 60px;
    display: inline-block;
    background-color: white;
    animation-fill-mode: forwards;
    animation-duration: 3s;
}
div:nth-of-type(1) {
  animation-name: orange;
  animation-delay: 0s;
}
div:nth-of-type(2) {
  animation-name: yellow;
  animation-delay: 3s;
}
div:nth-of-type(3) {
  animation-name: green;
  animation-delay: 6s;
}
div:nth-of-type(4) {
  animation-name: cyan;
  animation-delay: 9s;
}
div:nth-of-type(5) {
  animation-name: blue;
  animation-delay: 12s;
}
div:nth-of-type(6) {
  animation-name: violet;
  animation-delay: 15s;
}

@keyframes orange {
    to { background-color: orange; }
}
@keyframes yellow {
    to { background-color: yellow; }
}
@keyframes green {
    to { background-color: green; }
}
@keyframes cyan {
    to { background-color: cyan; }
}
@keyframes blue {
    to { background-color: blue; }
}
@keyframes violet {
    to { background-color: violet; }
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

但是如果您想要将两者结合在一起，也是可能的：

But if you want to combine both together, it's also all possible:

div {
 /* same for all */
    width: 60px;
    height: 60px;
    display: inline-block;
    background-color: white;
    animation-fill-mode: forwards;
    animation-duration: 3s;
}
div:nth-of-type(1) {
  animation-name: orange, yellow, green, cyan, blue, violet;
  animation-delay: 0s, 3s, 6s, 9s, 12s, 15s;
}
div:nth-of-type(2) {
  animation-name: yellow, green, cyan, blue, violet;
  animation-delay: 3s, 6s, 9s, 12s, 15s;
}
div:nth-of-type(3) {
  animation-name: green, cyan, blue, violet;
  animation-delay: 6s, 9s, 12s, 15s;
}
div:nth-of-type(4) {
  animation-name: cyan, blue, violet;
  animation-delay: 9s, 12s, 15s;
}
div:nth-of-type(5) {
  animation-name: blue, violet;
  animation-delay: 12s, 15s;
}
div:nth-of-type(6) {
  animation-name: violet;
  animation-delay: 15s;
}

@keyframes orange {
    to { background-color: orange; }
}
@keyframes yellow {
    to { background-color: yellow; }
}
@keyframes green {
    to { background-color: green; }
}
@keyframes cyan {
    to { background-color: cyan; }
}
@keyframes blue {
    to { background-color: blue; }
}
@keyframes violet {
    to { background-color: violet; }
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

这篇关于使用秒而不是百分比来表达CSS3 @keyframes的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！