CSS动画自动进入默认值

Question

https://jsfiddle.net/t3w1Lqr0/1/
当我运行此代码时，它有时会按预期工作，有时会出现故障并转到0deg
请看下面的 gif ↓
我将它用于electron。
我大部分时间在jsfiddle工作，但很少在电子工作。
Electron v13.1.2
Chromium v91.0.4472.77
Node v14.16.0

Answer 1

您可以完全在 CSS 中创建动画并使用 animation-fill-mode: forwards; 来保留动画的最后一帧。

* {
  box-sizing: border-box; margin: 0; padding: 0;
}
html, body { height: 100%; }
body {
  display: flex; justify-content: center; align-items: center;
  background-color: #eee;
}
div, hr::before {
  overflow: hidden; position: absolute;
  width: 10rem; height: 5rem;
}
hr {
  border-style: solid; border-width: 1.5rem;
  border-color: #333; border-radius: 10rem;
  width: 10rem; height: 10rem;
}
hr::before {
  content: '';
  transform-origin: 50% 100%; transform: translateX( -50% );
  bottom: 0.25rem; left: 50%;
  border-radius: 100% 100% 0.5rem 0.5rem;
  width: 0.5rem; height: 4.5rem;
  background-color: #ccc;
  animation-name: rotate; animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards; /* Force last frame of animation to stay */
}
@keyframes rotate {
  0% { transform: translateX( -50% ) rotate( -90deg ); }
  100% { transform: translateX( -50% ) rotate( 90deg ); }
}

<div> <hr> </div>

如果您想在动画像 JavaScript 那样开始播放之前添加延迟，您可以使用 CSS 属性 animation-delay。