Question

我需要在一个按钮元素上运行两个CSS3动画（理想情况下是纯CSS，半理想情况下是跨浏览器，vanilla JS），用于我的Web移动应用程序。

第一个是凸出的动画;它是在按钮元素加载时播放的。

第二个是在按钮元素上应用的旋转动画;按下按钮时可以播放。

知道点击按钮会导致页面刷新。因此，我们的想法是，用户在点击按钮后会看到按钮旋转，然后在页面重新加载后让它突然显示（恰好一次）。

然而，这种行为是不稳定的。因此，我已经多次看到凸起动画（连续发生）。

如果我夸大这个凸起，它似乎只播放一次，但在播放之前按钮上有一个可见的颤抖（几乎就像动画在中途发射和中止一样）。

我无法说明为什么会这样。你可以帮助我在没有恶作剧的情况下干净利落地完成这项任务吗？

＆＃13;

button.refresh:focus {
  -webkit-animation: rotation 0.5s 20 linear;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

@keyframes bulge {
  0% {
    transform: scale( 1);
  }
  20% {
    transform: scale( 1.1);
  }
  100% {
    transform: scale( 1);
  }
}

.load {
  -webkit-animation: bulge 0.5s 1;
}

＆＃13;

<form method="POST" action="/">
  <button class="refresh load" style="background-image: url('{{ static_url }}img/refresh.png')" type="submit" name="rf" value="1">&nbsp;</button>
</form>

＆＃13;

P.S。忽略{{ }}类型语法 - 这是一个Django框架的东西。

在按钮元素

0 个答案: