CSS过渡制作奇怪的效果

Question

我正在尝试创建类似于引导输入的东西。当用户点击输入时，它将播放一个漂亮的过渡和发光。我得到了所有的样式，但过渡是奇怪的，但所有其他网站的动画正确。我的方框阴影显示得非常快，然后变暗，但在这个链接，一切都正常工作，但在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;
}

顺便说一下，我用的是最新版本的Google Chrome。

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

这将保留您已经在那里的框阴影(它被覆盖/替换为您的焦点框阴影)和将添加到焦点上的新框阴影，当您单击该框时，它将正确地淡入和淡出。