CSS 전환 이상한 효과 만들기?

Question

부트 스트랩 입력과 비슷한 것을 만들려고합니다. 사용자가 입력을 클릭하면 멋진 전환과 빛을냅니다. 나는 모든 스타일을 내려 받았지만 전환은 이상하게 보였지만 다른 모든 사이트는 올바르게 움직였다. 내 상자 그림자가 매우 빠르게 나타난 다음 여기가 어두워 지지만 여기는 This link입니다. 모든 것이 올바르게 작동하지만 여기서는 http://67.184.73.19/Website/Login/입니다. 이전의 링크와 다르게 애니메이션이 적용됩니다. 아래에 몇 가지 코드가 있습니다.

구글 크롬의 최신 버전을 사용하는 방식 임함으로써 CSS 입력

.Field { 
-webkit-transition: all 0.30s ease-in-out; 
-moz-transition: all 0.30s ease-in-out; 
-ms-transition: all 0.30s ease-in-out; 
-o-transition: all 0.30s ease-in-out; 
min-height:34px; 
padding:7px 8px; 
outline:none; 
color:#333; 
background-color:#fff; 
background-repeat:no-repeat; 
background-position:right center; 
border:1px solid #ccc; 
border-radius:3px; 
box-shadow:inset 0 1px 2px rgba(0,0,0,0.075); 
-moz-box-sizing:border-box; 
box-sizing:border-box; 
vertical-align:middle; 
} 

.Field:focus { 
box-shadow:0 0 10px rgba(0,153,255,.75); 
border:1px solid #09F; 
} 

.

Answer 1

이것은 원래 상자 그림자가 삽입되는 것과 관련이 있습니다. 브라우저는 인세 트와 비 인세 트 상자 그림자 사이를 전환하는 데 문제가있는 것으로 보이며 시도하지 않습니다. 쉽게 수정하지만이 - 포커스 스타일에서 원래 상자 그림자를 추가 : 이것은 당신이 이미 가지고있는 상자 그림자를 유지

.Field:focus { 
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075), 0 0 10px rgba(0,153,255,.75); 
    border: 1px solid #09F; 
} 

(덮어 쓰기 한/당신의 초점 상자 그림자로 대체) 은 포커스가있는 새 상자 그림자 인을 추가합니다.이 상자 그림자를 클릭하면 올바르게 페이드 인 및 페이드 아웃됩니다.