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
background_styles.css
@import url('https://fonts.googleapis.com/css?family=Raleway:900');
* {
font-family: Raleway;
}
html {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-size: cover;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="background_styles.css">
<link rel="stylesheet" href="styles.css">
<title>Animated Text Reveal</title>
</head>
<body>
<h1 class="reveal-text">Reveal Text</h1>
</body>
</html>
styles.css
.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;
}
}