CSS hr dashed显示错误

Question

我在CSS中创建了一个虚线，并使用额外的参数在HTML中进行渲染。但是当它自己呈现的线时，它会在开始和结束时切断位。

hr.vertical {
    position: absolute;
    width: 0px;
    border: dashed;
    -webkit-animation: circlein 1s; /* Chrome, Safari, Opera */
    animation: circlein 1s;
} 

呈现：http://gyazo.com/f3b1a25759017bd7b4dba789d34bffc9