Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Typewriter effect */ @keyframes type { from { width: 0; } to { width: 20ch; } } .typewriter { overflow: hidden; white-space: nowrap; width: 0; animation: type 2s steps(20) forwards; border-right: 2px solid; } /* Sprite sheet: 8 frames */ @keyframes sprite { from { background-position: 0 0; } to { background-position: -800px 0; } } .character { animation: sprite 0.8s steps(8) infinite; }
Result
Open