CODEWITHSUNDEEP
htmlcssanimation
caxinaswin
caxinaswin

Reputation: 71

Transform not working properly on anchor

I am trying to animate a button making it translate a little bit to the right for a specific time, but somehow the transition never happens.

@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>

lost some time and can't figure out what is wrong any help?

Upvotes: 0

Views: 994

Answers (1)

C.Schubert
C.Schubert

Reputation: 2064

Anchor are inline elements transform does not work on these type of elements.

Add a different display (block or inline-block) to your anchor

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

Source: w3.org

Upvotes: 2

Related Questions