CSS 动画自动进入默认

Question

https://jsfiddle.net/t3w1Lqr0/1/
当我运行这段代码有时会按预期工作，有时会出现故障并转到 0deg
看下面的动图↓
我将它用于 electron.
我大部分时间都在 jsfiddle 工作，但很少在 electron 工作。
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.

CSS 动画自动进入默认

CSS animation automatically goes to default

html

javascript

chromium

electron