アニメーション転送後にトランジションが機能しない

Question

Hie！

animation-fill-modeのアニメーションの後にトランジションが機能しません。 最初のアニメーションは開始され、ホバーで終了しますが、アンオーバーされた後はアニメーションが適用されません。

Codepen here

それはChromeとSafariで再現。 Firefoxでうまく動作します。

パグ：

button Button 

SCSS：

body { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
} 

button { 
    padding: 5px 0; 
    position: relative; 
    border: none; 
    border-radius: 0; 
    background: transparent; 
    outline: none; 
    cursor: pointer; 
    font-weight: 700; 
    text-transform: uppercase; 

    &:before { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 100%; 
    right: 0; 
    height: 4px; 
    border-radius: 2px; 
    background: blue; 
    transition: all .25s; 
    } 

    &:hover { 

    &:before { 
     animation: nav-link-hover .25s forwards; 
    } 
    } 
} 

@keyframes nav-link-hover { 

    0% { 
     left: 0; 
     right: 100%; 
    } 

    100% { 
     left: 0; 
     right: 0; 
    } 
} 

がUPDATE
私は、回避策を見つけたが、それが良いか、例えばになる場合どんな答えを待ち、喜んでそれを受け入れます破損したキーフレームを正常に使用します。

Answer 1

クロム/サファリのキーフレームに何が問題なのかまだ分かりませんが、簡単な回避策が見つかりました。

今、最初の 'before'要素が右にありません。幅はright: 0; width: 0;です。
ホバー上では、100％幅で左に動いて、過渡的に成長し始めます：left: 0; right: auto; width: 100%;。
最後に、ホバーが失われたとき、「前」は減少し始め、右端にもう一度休息します。

新コード：アニメーションが始まる前に

button { 
    padding: 5px 0; 
    position: relative; 
    border: none; 
    border-radius: 0; 
    background: transparent; 
    outline: none; 
    cursor: pointer; 
    font-weight: 700; 
    text-transform: uppercase; 

    &:before { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: 0; 
    height: 4px; 
    border-radius: 2px; 
    background: blue; 
    transition: all .25s; 
    } 

    &:hover { 

    &:before { 
     left: 0; 
     right: auto; 
     width: 100%; 
    } 
    } 
} 

Codepen

Answer 2

のアニメーション要素が定義された状態が必要です。トリガー（つまり、ホバー）に状態を定義すると、予期しない動作が発生することがあります。したがって、ホバーの前に出発点を設定する必要があります。この場合

、単に&:before

button { 
    padding: 5px 0; 
    position: relative; 
    border: none; 
    border-radius: 0; 
    background: transparent; 
    outline: none; 
    cursor: pointer; 
    font-weight: 700; 
    text-transform: uppercase; 

    &:before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    width: 0; 
    height: 4px; 
    border-radius: 2px; 
    background: blue; 
    transition: all .25s; 
    } 

    &:hover { 

    &:before { 
     right: auto; 
     width: 100%; 
    } 
    } 
} 

の「非ホバー」プロパティにホバーから left: 0;を移動