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，你应该是好的：

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用javascript添加类（例如.active）并将.spin：hover css替换为.spin.active

，而不是使用：hover状态。

这是一个jQuery示例：

$('button').on('click', function() {
   $(this).addClass('active');
});

这是一个可能有助于做你想做的事情的例子：https://jsfiddle.net/en53matp/1/

Answer 3

在CSS中，你可以设置一个hudge延迟来冻结defaut状态下的动画（不是：悬停）。

＆＃13;

.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;
  transition-delay: 99999s
}
.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;
  transition-delay: 99999s
}
.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%;
}

＆＃13;

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

＆＃13;

.spin::before {
  border: 2px solid transparent;
  transition-delay: 99999s/* whatever you think long enough to hold the transition to be back to initial state */
}
.spin::after {
  border: 0 solid transparent;
  transition-delay: 99999s
}

https://jsfiddle.net/en53matp/3/

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

3 个答案: