动画颜色变化？

Question

我以前从未使用过 CSS 动画，但想在我的下一个项目中使用。我有这个：

http://jsfiddle.net/ujDkf/1/

但与其让颜色只是改变，我更希望它像进度条一样从左到右填充。这可以用边框颜色吗？

.box{
 position : relative;
 width : 200px;
 height : 50px;
 background-color : black;
 color:white;
 border-bottom: 5px solid grey; 
 -webkit-transition : border 500ms ease-out; 
 -moz-transition : border 500ms ease-out;
 -o-transition : border 500ms ease-out;
}

.box:hover{
   border-bottom: 5px solid red;
}

Answer 1

您可以调整答案以从左到右 CSS 填充背景颜色：

#box{
    position : relative;
    top: 10px;
    left: 10px;
    width : 100px;
    height : 100px;
    background-color : gray;
}
#simulate_border {
    position : relative;
    width : 120px;
    height : 120px;
    background: linear-gradient(to right, red 50%, black 50%);
    background-size: 200% 100%;
    background-position:right bottom;
    transition:all 500ms ease;
}
#simulate_border:hover{
    background-position:left bottom; 
}

js小提琴

对角线进展也是可能的 - jsFiddle2