Animate color change?

Question

I've never used CSS animations before but would like to on my next project. I have this:

But rather than having the color just change I'd like it to fill left to right in the same way a progress bar does. Is this possible with a border color?

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

this question is a copy http://stackoverflow.com/questions/17212094/fill-background-color-left-to-right-css — Mudassir, Jun 27 '14 at 20:03
I saw that question, but it relates to the entire background. I couldn't think how to modify it to provide just the border change. — James MV, Jun 27 '14 at 20:04
oh, im sorry i must have mistaken the question as it is not clear — Mudassir, Jun 27 '14 at 20:05
i think you should use the border-image css3 property and use transition:.5s; to make it change like you want it. — Mudassir, Jun 27 '14 at 20:08
@deathApril: Yeah my next move would be that. But it adds an extra layer of complexity as you'd need to use some Jquery to tie the mouse over the parent div to animate the lower one. If that makes sense? I don't know much about animation so was hoping there was an easy way! — James MV, Jun 27 '14 at 20:08
nope, works fine for me without javascript. posted as answer. — Aprillion, Jun 27 '14 at 20:16

Aprillion · Accepted Answer · 2018-06-10T07:50:18.220

5

You can adapt answer to 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

diagonal progression is also possible - jsFiddle2

edited Jun 10 '18 at 07:50

answered Jun 27 '14 at 20:16

Aprillion

21,510
5
55
89

With some editting I've got this working exactly how I need. Thanks deathApril! http://jsfiddle.net/9a4MW/ – James MV Jun 27 '14 at 20:35

score 1 · Answer 2 · answered Jun 27 '14 at 20:13

You can use background-gradient and background-size to animate them via transition: DEMO

#box {
    position : relative;
    width : 100px;
    height : 100px;
    padding:5px;
    margin:1em;
    background: linear-gradient(to right, red, red) top left, linear-gradient(to right, red, red) bottom right, linear-gradient(to right, red, red) top left, linear-gradient(to right, red, red) bottom right;
    background-repeat:no-repeat;
    background-size:3px 100%, 3px 100%, 100% 3px, 100% 3px;
    transition : 500ms ease-out;
    background-color : gray;
}
#box:hover {
    background-size:3px 0%, 3px 0%, 0% 3px, 0% 3px;
}

SVG could be an hint too.

If you are curious , Some other example with little difference for the method : http://codepen.io/gc-nomade/pen/pKwby , http://codepen.io/gc-nomade/pen/bhxAL & http://codepen.io/gc-nomade/pen/IGliC — G-Cyrillus, Jun 27 '14 at 20:15

Animate color change?

2 Answers2