Skip to content
CSS Write-on text effect
Find file
Latest commit 145c1cc @tylergaw Update
Failed to load latest commit information.
images Initial commit Update
general-styles.css Updating description
index.html Moving JS to external
play-loop.js Moving JS to external
write-on.css Updating docs in CSS

CSS Write-on Text Effect

I'm using -webkit-mask-image with a sprite that contains a frame for each partial path of the text. The text, "Write-on!" is in an h1 element but the mask applied to its parent element starts out at 100% transparent so nothing is shown below it. A CSS animation is applied to the containing element. Each step of the animation changes the -webkit-mask-image-position to advance to the next frame. The animation step percentages are placed close enough together that the interpolation between one frame and the next is not seen.


Something went wrong with that request. Please try again.