* { padding:0; margin:0; list-style:none; } .svgs { width:500px; height:500px; background:rgba(0,0,0,1); animation:name 2s ease-out; animation-fill-mode:both; text-align:center; } .alibaba { animation:lineMove 3s ease-out; animation-delay:2s; animation-fill-mode:both; stroke:#fff; } @keyframes name { 0% { width:500px; height:500px; border-radius:10%; } 100% { width:200px; height:200px; border-radius:50%; } }@keyframes lineMove { 0% { stroke-dasharray:0,2694.88623046875; } 50% { stroke-dasharray:2694.88623046875,2694.88623046875; fill:rgba(0,0,0,0); opacity:1; } 100% { stroke-dasharray:2694.88623046875,2694.88623046875; fill:rgba(255,255,255,1); opacity:1; } }