Question

我想知道如何在没有按钮按钮交互的情况下在随机位置上平滑地停止我的旋转动画（css）。

span.glyphicon-arrow-up {
position: absolute;
top: 31%;
left: 36%;
margin:-60px 0 0 -60px;
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation-iteration-count: 2;
animation:spin 2s linear infinite;
font-size: 14.0em;

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

我希望你们能帮助我。（我不知道关于javascript的事情）

Answer 1

首先创建第二个CSS类来应用动画。然后使用getComputedStyle计算＆amp;设置元素的旋转，并在触发事件时删除动画类。你如何触发事件取决于你;为了速度和速度简单，我刚刚使用了click事件，但你可以设置一个随机生成的延迟超时来触发它而无需任何用户交互。我还包含了一个不支持transform属性的浏览器的后备版，该属性只将其设置为initial。

＆＃13;

document.querySelector("div").addEventListener("click",function(){
  this.style.transform=window.getComputedStyle(this).getPropertyValue("transform")||"initial";
  this.classList.remove("spin");
});

＆＃13;

div{
  background:#000;
  height:50px;
  width:50px;
}
.spin{
  animation:spin 2s linear infinite;
}
@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}
body,html{height:100%;}body{align-items:center;display:flex;justify-content:center;}

＆＃13;

<div class="spin"></div>

＆＃13;

请注意，我目前所在的计算机上没有安装任何仍需要transform属性作为前缀的浏览器。在我的测试中，getComputedStyle正在将前缀属性转换为无前缀的属性，但我不确定该函数的功能是否属于浏览器不需要的功能前缀版本。如果您发现这不适用于需要transform作为前缀的浏览器，那么您需要提供进一步的后备。下面是编辑的JavaScript函数，包括您可能需要的完整列表：

document.querySelector("div").addEventListener("click",function(){
  var style=window.getComputedStyle(this);
  this.style.transform=style.getPropertyValue("transform")||style.getPropertyValue("-webkit-transform")||style.getPropertyValue("-ms-transform")style.getPropertyValue("-moz-transform")||"initial";
  this.classList.remove("spin");
});

停止在CSS上旋转动画

1 个答案: