CSS border animation on hover - css

Question

So I've always animated with JavaScript but I wanted to try doing simpler animations with CSS. I have followed the guide on w3schools exactly but I can't seem to get any results.
nav ul li {
display: inline;
}
nav ul li a {
margin: 0em 2em;
text-decoration: none;
color: #000;
}
nav ul li a:hover {
animation: borderGrow 2s;
-webkit-animation: borderGrow 2s;
}
#keyframes borderGrow {
from { border-bottom: 0em solid #000; }
to { border-bottom: 1em solid #000; }
}
#-webkit-keyframes borderGrow {
from { border-bottom: 0em solid #000; }
to { border-bottom: 1em solid #000; }
}
<nav>
<ul>
<li><a href="#">Link One</li>
<li><a href="#">Link One</li>
<li><a href="#">Link One</li>
</ul>
</nav>

Answer 1

For some reason, the animation doesn't seem to work when the border property is not set on the original element itself (before the animation). Adding the border property to the original element does seem to solve it.
Based on MDN's list of animatable properties, it seems like while the border-color and border-width are animatable, the border-style is not and this could possibly be the reason why we are having to add it in the original element. However adding just border-style: solid by default produces a border in almost all browsers (if not all) and so it is better to specify the border-width: 0 also along with it.
Note:
Behavior seems to be consistent in IE10, IE11 and Firefox. So it is more likely to be the expected behavior and not a bug.
I will update the answer with further details if and when I manage to find a clear and specific source explaining the reason for the behavior.
nav ul li {
display: inline;
}
nav ul li a {
margin: 0em 2em;
text-decoration: none;
color: #000;
border-bottom: 0em solid #000;
}
nav ul li a:hover {
-webkit-animation: borderGrow 2s;
animation: borderGrow 2s;
}
#-webkit-keyframes borderGrow {
from {
border-bottom: 0em solid #000;
}
to {
border-bottom: 1em solid #000;
}
}
#keyframes borderGrow {
from {
border-bottom: 0em solid #000;
}
to {
border-bottom: 1em solid #000;
}
}
<nav>
<ul>
<li>Link One
</li>
<li>Link One
</li>
<li>Link One
</li>
</ul>
</nav>
Alternately this same effect can be achieved by just using transition instead of animation also. And for transition the need to set a border on the element before hover seems to be completely optional. Below is a sample snippet.
nav ul li {
display: inline;
}
nav ul li a {
margin: 0em 2em;
text-decoration: none;
color: #000;
border-bottom: 0em solid #000; /*optional for transition */
-webkit-transition: border-bottom 1s;
transition: border-bottom 1s;
}
nav ul li a:hover {
border-bottom: 1em solid #000;
}
<nav>
<ul>
<li>Link One
</li>
<li>Link One
</li>
<li>Link One
</li>
</ul>
</nav>

Answer 2

Problem 1.
You didn't complete ... tag in html. Below this right code is....
<nav>
<ul>
<li>Link One</li>
<li>Link One</li>
<li>Link One</li>
</ul>
</nav>
Problem 2.
You didn't add the primary border value for a tag. just add this css below to nav ul li a.
border-bottom:0em solid #000;
Check out my answer on jsfiddle

Answer 3

Right now I have the same problem on Safari/Webkit Browser. The border property does not work when I use this on css animation keyframes. You have to set/declare first the border property on the css file in order to work.
Example:
div.menu-menu-1-container ul li a, div.menu-menu-1-container ul.navbar-nav li.open ul.dropdown-menu li a,
.search-box .dropdown a i, .button-search
{
border: 10px groove #ffd700; /* do not forget to declare the border property and value or it will not work; */
animation: HHootteeLL 4s linear infinite;
-webkit-animation: HHootteeLL 4s linear infinite;
-moz-animation: HHootteeLL 4s linear infinite;
-ms-animation: HHootteeLL 4s linear infinite;
-o-animation: HHootteeLL 4s linear infinite;
}