html - 转换在 anchor 上无法正常工作

标签 html css animation

我正在尝试为一个按钮制作动画,使其在特定时间向右平移一点,但不知何故过渡从未发生。

@keyframes moveXpath {
  0% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(100px);
  }
}

.btn-animate {
  animation-name: moveXpath;
  animation-duration: 10s;
}
<body>
  <div class="container">
    <h1>button animation</h1>
    <div class="buttons">
      <a href="#" class="btn-animate">rotating button</a>
    </div>
  </div>
</body>

浪费了一些时间,无法弄清楚哪里出了问题,有什么帮助吗?

最佳答案

anchor 是内联元素,转换不适用于这些类型的元素。

向 anchor 添加不同的显示( block 或内联 block )

.btn-animate {
    animation-name: moveXpath;
    animation-duration: 10s;
    display: inline-block;
}

来源:w3.org

关于html - 转换在 anchor 上无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48843813/

相关文章:

javascript - Ionic-side-menu 隐藏了我所有的主要内容

css - 溢出 :hidden not working on Chrome

jquery - 如何根据跨域内容设置iframe高度?

iphone - UITableView 中的错误(deleteSections :withRowAnimation: )?

html - 样式未在 IE8 中应用于特定页面

javascript - 通过 html 音频标签在移动浏览器上播放音频

javascript - xhr.send(file) 不会将其作为多部分发布

html - 如何通过缩放而不拉伸(stretch)使图像适合父div

java - Java Swing 中的动画线条

ios - UIView animateWithDuration 如何通过触摸事件取消(不与 MapView 交互)