如何淡入特定的CSS属性

Question

我想在焦点上的元素上淡化从灰色到红色的边框颜色.

让颜色立即变化很容易,但我希望它能慢慢消失.

HTML

<input class="timeBlock destination hours" 
    type="text" 
    name="desHours" 
    value="00" 
    maxlength="2">

CSS

input.timeBlock {
    height: 90px;
    width: 90px;
    text-align: center;
    font-size: 3.5em;
    border-radius: 10px;
    color: #444;
    border: 3px solid #ccc;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.15) inset; 
    position: absolute;
    top:0;
    bottom: 0;
    margin: auto;
}

input.focus {
    border: 3px solid #cc0000;
}

JS

$("input").focus(function() {
    $(this).fadeIn('slow', function(){
       $(this).addClass('focus');
  });
});     

Answer 1

您不需要使用JavaScript来实现此目的.CSS3 transition属性非常有用:

input {
    border: 3px solid #ccc;
    transition:border 1s;
}
input:focus {
    border: 3px solid #cc0000;
}

见工作示例.

一点注意事项:请记住,他们已经在Chrome和Firefox中工作了很长时间,但IE <9不支持它们.你仍然会改变边框颜色,但没有过渡.