Animated Text Reveal in HTML

Complete source code how to create an animated text reveal using pure CSS. I will go over my planning and thought process for creating this text reveal as well as explain why I use each CSS style. By the end of this video you will have a basic understanding of how CSS animations work as well as how to utilize the @supports keyword to design websites that are compatible with older browsers


@import url('');

* {
    font-family: Raleway;

html {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;


<!DOCTYPE html>
        <link rel="stylesheet" href="background_styles.css">
        <link rel="stylesheet" href="styles.css">
        <title>Animated Text Reveal</title>
        <h1 class="reveal-text">Reveal Text</h1>


.reveal-text {
    font-size: 7em;
    font-weight: 900;
    color: white;

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .reveal-text {
        color: red;
        -webkit-background-clip: text;
        background-clip: text;
        background-repeat: repeat-x;
        animation: reveal-background 2s ease-in-out;
        animation-fill-mode: forwards;

@keyframes reveal-background {
    0% {
        background-size: 0px;
        background-position-y: 0%;
    10% {
        background-size: 30px;
        background-position-y: 0%;
    35%, 45% {
        background-position-y: 100%;
    70% {
        background-size: 30px;
        background-position-y: 0%;
    100% {
        background-size: 200px;

Leave a Comment