javascript - 更改 css 动画，使其在特定时间后自动运行

Question

是否可以使用 JavaScript 使动画自动运行并在 2 秒后保持更改(即不重置)？

我试过使用以下方法:

  element.style.WebkitAnimationPlayState = "paused";

和

  element.style.WebkitAnimationPlayState = "running";

然而它并没有起作用。任何其他建议表示赞赏。

.spin {
     width: 5em;
      height: 5em;
     padding: 0;
    }
    .spin:hover {
      color: #0eb7da;
    }
    .spin::before, .spin::after {
    top: 0;
    left: 0;
     }
    .spin::before {
      border: 2px solid transparent;
    }
    .spin:hover::before {
      border-top-color: #0eb7da;
      border-right-color: #0eb7da;
      border-bottom-color: #0eb7da;
      -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
      transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
    }
    .spin::after {
      border: 0 solid transparent;
    }
    .spin:hover::after {
      border-top: 2px solid #0eb7da;
      border-left-width: 2px;
      border-right-width: 2px;
      -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
      -webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
      transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
      transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
      transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
    }

    .circle {
      border-radius: 100%;
      box-shadow: none;
    }
    .circle::before, .circle::after {
      border-radius: 100%;
    }

    button {
      background: none;
      border: 0;
      box-sizing: border-box;
      box-shadow: inset 0 0 0 2px #f45e61;
      color: #f45e61;
      font-size: inherit;
      font-weight: 700;
      margin: 1em;
      padding: 1em 2em;
      text-align: center;
      text-transform: capitalize;
      position: relative;
      vertical-align: middle;
    }

    button::before, button::after {
      box-sizing: border-box;
      content: '';
      position: absolute;
     width: 100%;
      height: 100%;
        }

<button class="spin circle">spin circle</button>

Answer 1

将您的 :hover 选择器替换为一个额外的 active 类和一点 javascript，您应该会很好:

document.addEventListener('DOMContentLoaded', function() {
  var button = document.querySelector('.spin');
  
  setTimeout(function() {
    button.className += ' active';
  }, 2000);
});

.spin {
  width: 5em;
  height: 5em;
  padding: 0;
}

.spin::before, .spin::after {
  top: 0;
  left: 0;
}
.spin::before {
  border: 2px solid transparent;
}

.spin::after {
  border: 0 solid transparent;
}

.spin.active {
  color: #0eb7da;
}

.spin.active::before {
  border-top-color: #0eb7da;
  border-right-color: #0eb7da;
  border-bottom-color: #0eb7da;
  -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}

.spin.active::after {
  border-top: 2px solid #0eb7da;
  border-left-width: 2px;
  border-right-width: 2px;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

.circle {
  border-radius: 100%;
  box-shadow: none;
}
.circle::before, .circle::after {
  border-radius: 100%;
}

button {
  background: none;
  border: 0;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 2px #f45e61;
  color: #f45e61;
  font-size: inherit;
  font-weight: 700;
  margin: 1em;
  padding: 1em 2em;
  text-align: center;
  text-transform: capitalize;
  position: relative;
  vertical-align: middle;
}
button::before, button::after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}

<button class="spin circle">spin circle</button>