Elements lose transition when given animation property

Question

This HTML element had a nice transition effect when it was clicked. However when I added another class with animation property, transition was lost. Look at the demo: http://codepen.io/kunokdev/pen/rewveJ

  <div
    class="main-menu-item zoom-in-entrance">
    Test
  </div>

Do animation and transition properties not stack?

@keyframes zoom-in-entrance
  from
    opacity: 0
    -webkit-transform: scale3d(.3, .3, .3)
    transform: scale3d(.3, .3, .3)

  50%
    opacity: 1

.zoom-in-entrance
  -webkit-animation: zoom-in-entrance .25s forwards
  animation: zoom-in-entrance .25s forwards

.main-menu-item
  cursor: pointer
  background: $white
  transition: all .25s
  &:active
    +scale(0.95,0.95)
  i, span
    display: block

Animation from animation property only happens on page load and never again, however animation from transition happens only when an element is clicked. How do I make them both work?

Answer 1

Both your animation and transition properties are trying to affect scale. This is because you have specified forwards as the animation fill mode.

Since your animation ends on the "default" state of the item, you can use none instead, and the animation will not hold the scale at 1.0, allowing the transition to take effect:

-webkit-animation: zoom-in-entrance .25s none
animation: zoom-in-entrance .25s none

(you can also just leave out none as it's the default fill mode)

Updated pen: http://codepen.io/anon/pen/XdgqNq

Answer 2

If you remove the forwards which persits the final state of the animation it works fine.

Answer 3

If you can use js, you could remove zoom-in-entrance class after animation is finished.

Callback when CSS3 transition finishes