@-webkit-keyframes drawIn { 0% { stroke: transparent; stroke-dashoffset: 10000; } 75% { stroke: white; } } @keyframes drawIn { 0% { stroke: transparent; stroke-dashoffset: 10000; } 75% { stroke: white; } } html, body { height: 100%; background: #f2f2f2; } svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 550px; } .mask-path { stroke: white; stroke-dasharray: 10000; -webkit-animation: drawIn 2.5s 1s ease-in both; animation: drawIn 2.5s 1s ease-in both; }