CSS : 다른 애니메이션이 실행되는 동안 호버 전환을 부드럽게 유지하는 방법

Question

버튼을 만들었습니다. 이 버튼이 CSS 속성에 의해 정의된다 : 그것은 또한 갖는다

@keyframes blinker { 
    50% { background-color: #03FCFF; } 
} 

:

#button { 
    width: 50px; 
    height: 50px; 
    border: 3px solid #F1F2F0; 
    text-align:center; 
    background-color: #02BFC1; 
    display: table; 
    position: absolute; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right:0; 
    -webkit-transition: all 0.5s ease; 
    cursor: pointer; 
    box-shadow: 0px 0px 30px rgba(0,0,0,0.4); 
    animation: blinker 2s ease infinite; 
} 

이 버튼 깜박

이렇게 정의 원활 밝은 청색 어두운로부터 background-color 변경 애니메이션 blinker를 사용 호버 애니메이션 :

내 문제는 이것입니다. 호버 애니메이션이 깜박임 애니메이션을 추가하기 전에 완벽하게 부드럽게 사용되었습니다. 이제는 바로 background-color을 주황색으로 변경하고 transform: scale(1.1)은 여전히 ​​부드럽게 변경됩니다.

버튼을 마우스로 가리켜 blinker 애니메이션을 일시 중지하고 background-color을 부드럽게 변경하고 버튼을 마우스 왼쪽으로 움직여 애니메이션이 다시 시작되도록하려면 어떻게해야합니까? 가능하다면 CSS 만 사용하고 싶습니다.

원하는 경우 JSFiddle에 응답하도록 수정할 수 있습니다.

EDIT : 이것은 크롬에서만 작동하지 않습니다. 어떻게 그렇게 할 수 있습니까?

Answer 1

CSS에서 수행 할 작업이 너무 많습니다. 일반적으로 최대한 빨리 코드를 사용하려면 을 최대한 단순하게 유지하십시오.

button { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: block; 
 
    border: 3px solid #F1F2F0; 
 
    background-color: #02BFC1; 
 
    margin: 30px auto; 
 
    cursor: pointer; 
 
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4); 
 
    animation: 2s ease infinite blinker; 
 
    transition: background-color .5s ease, transform .5s ease, box-shadow .5s ease; /* it is best to select the properties you want to transition instead of using 'all' */ 
 
} 
 

 
@keyframes blinker { 
 
    50% { 
 
    background-color: #03FCFF; 
 
    } 
 
} 
 

 
button:hover { 
 
    background-color: #F37C2B; 
 
    box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.4); 
 
    animation: none; 
 
    transform: scale(1.1); 
 
}

<button></button>

프로젝트에 필요한 접두사를 사용하는 것을 잊지 마십시오

는 몇 가지 설명과 함께 사용자의 작업 코드입니다.