애니메이션 전달 후 전환이 작동하지 않습니다.

Question

Hie!

애니메이션 채우기 모드로 애니메이션을 전환 한 후 전환이 작동하지 않습니다. 전달; 첫 번째 애니메이션은 시작되고 마우스를 올리면 끝나지만 건너 뛰기가 끝난 후 전환이 적용되지 않습니다.

Codepen here

그것은 크롬 사파리 재생한다. 파이어 폭스에서 잘 작동합니다.

퍼그 :

button Button 

하는 SCS :

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; 이동