You can’t use CSS to animate between a solid and a dotted border style, which makes sense because the change is non-numerical. But you can use CSS to achieve the following effect:
.dotted_anim{
position:relative;
}
@keyframes a_border_shrink {
from {width: 100%;}
to {width: 0%;}
}
@keyframes a_border_grow{
from {width: 0%;}
to {width: 100%;}
}
.dotted_anim:before {
content: "";
display:inline-block;
position:absolute;
left:0;
width:100%;
height:100%;
border-bottom: 1px solid #333;
animation:a_border_shrink 0.3s linear 0s forwards;
}
.dotted_anim:after {
content: "";
display:inline-block;
position:absolute;
right:0;
width:0%;
height:100%;
border-bottom: 1px dotted #333;
animation:a_border_grow 0.3s linear 0s forwards;
}
.dotted_anim:hover:after{
animation:a_border_shrink 0.3s linear 0s forwards;
}
.dotted_anim:hover:before{
animation:a_border_grow 0.3s linear 0s forwards;
}
Just give your element the class dotted_anim or, to apply the style to all <a> tags, replace all instances of .dotted_anim in the above css with a.