javascript - CSS 动画自动进入默认设置

Question

https://jsfiddle.net/t3w1Lqr0/1/
当我运行此代码时，它有时会按预期工作，有时会出现故障并转到 0deg看下面的gif↓
我用它来 electron .
我大部分时间在 jsfiddle 工作但很少在 Electron 中起作用。Electron v13.1.2Chromium v91.0.4472.77Node 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 .