javascript - 从 3 个独立的 CSS 动画创建一个

Question

我是 CSS 动画的初学者，我已经从设计文件 CSS 动画代码中导出了这样的动画。

@keyframes first {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes second {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

@keyframes third{
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

animation: ${first} 307ms ease-in-out 0ms normal,${second} 2193ms linear 307ms normal,
           ${third} 503ms ease-in-out 2500ms normal;

但是我想知道是否可以在一个动画中制作它？如果我想拥有与生成版本相同的时间。如果真是这样，那么是以哪种方式？

标签： javascriptcssanimationcss-animationsbezier