CSS动画从中间开始

Question

我有一个非常简单的动画，其边框是我在宽度，高度上创建的动画，然后中心淡入。

我遇到的问题是我无法弄清楚如何从中心动画，而不是从左到右（对于顶部和底部边框）和从上到下（对于边框）

有没有简单的方法让动画从中间发生？

顶部和底部动画的代码示例：

@keyframes tb {                                                             
  0% {width: 0;}
  100% {width: 800px}
}

JSFiddle of the code.

Answer 1

您可以按时播放，并使用动画延迟使它从动画中的正确点开始。

例如

@keyframes makeFatter {                                                             
  0% {width: 0;}
  100% {width: 800px}
}

#makeMeFat {
  animation-name: makeFatter;
  animation-duration: 5s;
  animation-delay: -2.5s;  /* Makes it start at 50% of your animation, i.e. width: 400px */
  /* blah blah... rest of the CSS code */
}