This whole page -- the layout, the motion, the colours -- was made with free tools only. No subscription, no account, no paid software.
See how it works ↓Write your HTML. This is the text and structure of your page -- the words, the headings, the buttons.
Write your CSS. This is the colour, spacing, and -- the part this guide is about -- the animation.
Put both files online for free. The full article explains three different ways to do this.
Open style.css and look for a section called
@keyframes fade-up. That block is a list of instructions: "start invisible
and slightly lower, end fully visible and in the normal position." Every element with
the class animate-in follows those instructions when the page loads.
The delay-0, delay-1, delay-2
classes just tell each element to wait a little longer before it starts, which is what
creates the "one after another" effect instead of everything popping in at once.