1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
#diagram { height: 3000px; width: 100%; margin: auto; display: block; .line { stroke-dasharray: 5; // animation: draw 1s ease-in; } } @keyframes draw { from { stroke-dashoffset: -1400; } to { stroke-dashoffset: 0; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }