Css animation-fill-mode backwards does not work - html

Question

I have a link that i want to animate his border from 1px to 5px on click and in the end of the animation i want the 1px to stay, i am using animation-fill-mode with backwards but i see that the 1px border does not apply after the animation is finish.
document.querySelector('a').onclick = function() {
this.classList.add('border-g');
}
/* Styles go here */
body {
margin: 100px;
}
a {
border: 1px solid transparent;
display: inline-block;
padding: 20px;
}
.border-g {
-webkit-animation: border-grow 0.5s;
animation: border-grow 0.5s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
#-webkit-keyframes border-grow {
from {
border: 1px solid #D74C43;
}
to {
border: 5px solid #D74C43;
}
}
#keyframes border-grow {
from {
border: 1px solid #D74C43;
}
to {
border: 5px solid #D74C43;
}
}
<a>Hello world</a>

Answer 1

In this instance, you have to define the final state in your CSS first.
Then define the new start point in your animation
body {
margin: 100px;
}
a {
border: 1px solid #D74C43;
/* end like this */
display: inline-block;
padding: 20px;
-webkit-animation: border-grow 0.5s;
animation: border-grow 0.5s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
#-webkit-keyframes border-grow {
from {
border: 1px solid transparent;
/* starts like this */
}
to {
border: 5px solid #D74C43;
/* animation ends then switches to final state */
}
}
#keyframes border-grow {
from {
border: 1px solid transparent;
}
to {
border: 5px solid #D74C43;
}
}
<a>Hello world</a>
EDIT
To solve your updated question...the default states would need to be applied to the border-g class.
Otherwise the answer remains as previously.
document.querySelector('a').onclick = function() {
this.classList.add('border-g');
}
body {
margin: 100px;
}
a {
display: inline-block;
padding: 20px;
}
a.border-g {
border: 1px solid #D74C43;
-webkit-animation: border-grow 0.5s;
animation: border-grow 0.5s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
#-webkit-keyframes border-grow {
from {
border: 1px solid transparent;
}
to {
border: 5px solid #D74C43;
}
}
#keyframes border-grow {
from {
border: 1px solid transparent;
}
to {
border: 5px solid #D74C43;
}
}
<a>Hello world</a>

Answer 2

From what I read on w3.org, in case of animation-fill-mode: backwards, the properties defined in the keyframe (from or to) will only apply to animation-delay period:
4.9. The animation-fill-mode property
backwards
During the period defined by animation-delay, the animation
will apply the property values defined in the keyframe that will start
the first iteration of the animation. These are either the values of
the from keyframe (when animation-direction is normal or alternate) or
those of the to keyframe (when animation-direction is reverse or
alternate-reverse).