アニメーションプロパティが指定されると、要素の遷移が失われる

Question

このHTML要素は、クリックしたときに素晴らしいトランジション効果を持ちました。しかし、animationプロパティを持つ別のクラスを追加すると、移行が失われました。デモを見てください：http://codepen.io/kunokdev/pen/rewveJ

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

animationとtransitionプロパティは積み重ねないでください？ animationプロパティから

@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 

アニメーションは、ページの読み込み時に発生し、決して再び、しかしtransitionからアニメーションが要素がクリックされたときにのみ発生します。 どのようにして両者を動作させるのですか？

Answer 1

どちらもあなたのanimationとtransitionプロパティはscaleに影響を与えるようにしようとしています。これは、アニメーション塗りモードとしてforwardsを指定したためです。 （

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

：あなたのアニメーションは、アイテムの「デフォルト」状態に終わるので

、トランジションを有効にすることができ、あなたの代わりにnoneを使用することができ、およびアニメーションはscale1.0でを保持していますあなたがforwardsを削除した場合http://codepen.io/anon/pen/XdgqNq

Answer 2

jsを使用できる場合は、アニメーションが終了した後に、ズームインインエントリークラスを削除できます。

Callback when CSS3 transition finishes

Answer 3

：それはデフォルトの塗りつぶしモードだと、あなたはまた、単に

）更新ペンを noneを残すことができますそれはアニメーションの最終状態を納得させるものです。