How to Create an Animated Website for Free: Beginner’s Step-by-Step Guide

Tested by TNT Review — record TNT-TEST-2026-10-04-002, 5 October 2026. We ran a structural check against the starter files below to confirm the animation is wired correctly and that nothing in the page depends on a paid service. What that check does and does not prove is explained in Verification.

The problem

You want a website that feels a little alive — text that fades in, a button that settles into place — instead of a page that just appears all at once like a Word document. Most tutorials that promise this quietly assume you already own a paid page builder, a premium theme, or a subscription to an animation library.

You don’t need any of that. A fade-in, a slide-up, a staggered reveal — these are built into CSS, which is free, which every browser already understands, and which you can write in a plain text editor.

Expected outcome

By the end of this guide you will have a real, working one-page website with an animated hero section, sitting on your own computer, ready to put online for free. You will understand exactly why the animation works, not just where to paste some code you don’t understand.

Requirements and costs

• A text editor. Notepad works. Most people prefer a free one called VS Code, but it is not required for this guide.
• A web browser. You already have one.
• Cost: free. No account, no sign-up, no software purchase, to build and preview the page. Putting it online (covered near the end) also has a genuinely free option.

How the animation works (the idea, in plain words)

A CSS animation is really just two instructions: “here is how the element looks at the start” and “here is how it should look at the end.” The browser does all the hard work of smoothly changing between those two points on its own — you never have to calculate the in-between frames yourself.

In this guide, the start is: invisible, and sitting 14 pixels lower than normal. The end is: fully visible, in its normal position. The browser fills in everything in between, over seven tenths of a second, which is enough time for a human eye to notice it as motion rather than a flicker.

Step-by-step implementation

1. Create a folder on your computer, for example my-website.
2. Inside it, create two files: index.html and style.css. The names matter — browsers look for index.html automatically, and the HTML file links to the CSS file by that exact name.
3. Copy the HTML from the download below into index.html. Notice the class animate-in on the heading, the paragraph, and the button — that class is what makes an element animate.
4. Copy the CSS from the download into style.css. Scroll to the bottom, where the comments explain @keyframes (the instructions for the animation) and .animate-in (the rule that applies those instructions).
5. Open index.html in your browser by double-clicking it. You should see the heading, paragraph and button fade and slide into place, one after another, the instant the page loads.
6. Change the timing. In style.css, find .delay-1 { animation-delay: 0.15s; } and change 0.15s to 1s. Refresh the page. You will see the second item now wait a full second before it appears — this is how you control the “one after another” rhythm.

A real example

The download contains the exact three-card layout described above, plus a verification script that checks the files for the mistakes beginners make most often:

$ node verify-site.js

{
  "checked": 7,
  "passed": 7,
  "failed": 0,
  "checks": [
    { "name": "every HTML class has a matching CSS rule", "ok": true },
    { "name": "every animation-name has a defined @keyframes block", "ok": true },
    { "name": "at least one @keyframes block exists", "ok": true, "detail": "fade-up" },
    { "name": "prefers-reduced-motion fallback is present", "ok": true },
    { "name": "no external network dependency (fonts, CDNs, images)", "ok": true },
    { "name": "structural HTML tags are balanced", "ok": true },
    { "name": "the three numbered steps appear in order", "ok": true }
  ]
}

Check number two is the one worth remembering even outside this guide: it confirms every animation-name in the CSS has a matching @keyframes block with the exact same spelling. A single typo here — fade-up written as fadeup in one place and not the other — is the most common reason a CSS animation “just doesn’t do anything,” with no error message anywhere to tell you why.

Verification and troubleshooting

What we tested, on 5 October 2026 (record TNT-TEST-2026-10-04-002): the structural correctness of the starter files themselves, using the reproduction script above. 7 of 7 checks passed. This is a structural check, not a visual one — it does not render the page or take a screenshot, so it proves the animation is wired correctly and that nothing depends on an external paid service, but it does not judge whether the motion looks good to a human eye. Open the file in your own browser to judge that yourself; the download takes under a minute.

Troubleshooting:

• Nothing animates at all. Open your browser’s developer tools (F12) and check the Console tab for a red error about style.css not loading — this usually means the CSS file is not in the same folder as the HTML file, or is named slightly differently.
• The text is just invisible, permanently. This happens if you copy the .animate-in rule but delete the animation-fill-mode: forwards line. Without it, the element snaps back to its invisible starting state the instant the animation ends.
• It animates every time I scroll, not just once. This guide’s version only ever runs once, on page load. Making something re-animate every time it scrolls into view needs a small amount of JavaScript, which is deliberately outside the scope of this free, no-JavaScript starter.

Limitations and alternatives

This technique animates things once, when the page loads. It cannot: animate something only when it scrolls into view (needs JavaScript), animate between two different pages (needs a framework), or create complex physics-like motion such as bouncing or dragging (needs a JavaScript animation library). For any of those, a free JavaScript library is the next honest step up — still free, just more to learn.

If you would rather not write any code at all, free visual website builders exist that generate animations like this for you through a point-and-click interface. The trade-off is less control over exactly how the motion behaves, and most of them push you toward a paid plan once you want a custom domain or to remove their branding.

Putting it online for free

Two genuinely free ways to publish these exact files, with no credit card required:

• GitHub Pages. Create a free GitHub account, create a repository, upload index.html and style.css, then turn on Pages in the repository’s settings. Your site appears at a free github.io address.
• Netlify (free tier). Create a free account, then drag your project folder directly onto the Netlify dashboard. Your site appears at a free netlify.app address within seconds, with no command line required.

Both free addresses work properly and cost nothing ongoing. A custom domain name (like yourname.com instead of a free subdomain) is the one genuinely common paid upgrade, typically in the order of ten to twenty dollars a year from a domain registrar — and it is optional. Neither hosting option above requires it.

Free resources

The download contains the complete starter project — the exact HTML and CSS described in this guide, plus the verification script. No sign-up, no email required.

Download the free animated website starter (ZIP, 6 KB)

Is there a paid version?

Not yet, and we would rather say so plainly than imply one exists. Everything in this guide is the complete method. TNT Review has sold nothing to date and has no checkout set up, so treat any future price we mention as a hypothesis, not an offer.