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; 
} 

通過使用最新版本的谷歌瀏覽器的方式IM。

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; 
} 

這使的box-shadow你已經有（這是被重寫/替換爲您重點的box-shadow）並且將添加到焦點上的新框陰影中，當您在框中單擊時，它正確淡入和淡出。