stroke-dasharray：定义描边的虚线长度，如果提供奇数个，则会自动复制该值成偶数
stroke-dashoffset：定义虚线描边的偏移量（在路径开始的前面，看不到）
实现如下所示
svg{ transform:rotate(-90deg); }
@keyframes rt{
to{
stroke-dashoffset:0;
}
}
<circle class="a" cx="300" cy="300" r="150" style="fill:transparent;stroke:#000;stroke-width:3px;" />
<circle class="a" cx="300" cy="300" r="150" style="fill:transparent;stroke:red;stroke-width:4px;stroke-dasharray:942.4777px; stroke-dashoffset:942.4777px; animation:rt 2s ease-in both " />
原理就是设置stroke-dasharray和stroke-dashoffset一样大的数值，为圆形的周长