css - 动画颜色变化？

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

您可以调整对 Fill background color left to right 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; 
}

jsFiddle

对 Angular 线级数也是可能的 - jsFiddle2