Dank moderner Browsertechnik und CSS ist es möglich ruckelfreie Animationen zu erstellen die für Webseiten genutzt werden können. So zum Beispiel SVG animierte Buchstaben.
/ Stil für die SVG-Pfade des ersten SVGs / #first-svg path { fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4px; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawPathFirst 55s forwards; }
@keyframes drawPathFirst { to { stroke-dashoffset: 0; } }
/ Stil für die SVG-Pfade des zweiten SVGs / #second-svg path { fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4px; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawPathSecond 55s forwards 20s; }
@keyframes drawPathSecond { to { stroke-dashoffset: 0; } }