I’m doing a fun project on how to animate text using CSS. I followed this tutorial to the T (https://youtu.be/d9zhyAsnWYw?si=oNDkiPuHMcGxV7lS | except for the background image, I’m using Tekken 8. Haha), but nothing is animating on the screen. This is my first time messing with animations, so I’m learning something new. The code is below.
<code>**HTML**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Animation Appear Right</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="wrapper">
<section class="textArea">
<span>j</span>
<span>i</span>
<span>n</span>
<span>v</span>
<span>s</span>
<span>.</span>
<span>k</span>
<span>a</span>
<span>y</span>
<span>u</span>
<span>z</span>
<span>a</span>
</section>
<p>Tekken 8 Deluxe Edition</p>
</section>
</body>
</html>
</code>
<code>**HTML**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Animation Appear Right</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="wrapper">
<section class="textArea">
<span>j</span>
<span>i</span>
<span>n</span>
<span>v</span>
<span>s</span>
<span>.</span>
<span>k</span>
<span>a</span>
<span>y</span>
<span>u</span>
<span>z</span>
<span>a</span>
</section>
<p>Tekken 8 Deluxe Edition</p>
</section>
</body>
</html>
</code>
**HTML**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Animation Appear Right</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="wrapper">
<section class="textArea">
<span>j</span>
<span>i</span>
<span>n</span>
<span>v</span>
<span>s</span>
<span>.</span>
<span>k</span>
<span>a</span>
<span>y</span>
<span>u</span>
<span>z</span>
<span>a</span>
</section>
<p>Tekken 8 Deluxe Edition</p>
</section>
</body>
</html>
<code>**CSS**
body{
background-image: url(tekkenbackgroung.jpg);
background-size: cover;
-webkit-background-size: cover; /*Find out what this means?*/
background-position: center center;
height: 100vh; /*Find out what this means too?*/
}
.wrapper{
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
}
.wrapper p{
font-size: 60px;
letter-spacing: 2px;
margin: 15px 0;
color: white;
font-weight: bold;
}
span{
font-size: 30px;
letter-spacing: 2px;
margin: 15px 0;
color: white;
font-weight: bold;
text-transform: uppercase;
}
.text-area{
font-size: 100px;
font-weight: bold;
letter-spacing: -5px;
}
.text-area span{
color: #262626;
opacity: 0;
transform: translate(-300px, 0) scale(0);
animation-name: animate;
animation: animate 3s forwards;
display: inline-block;
}
.text-area span:nth-of-type(2){
animation-delay: .1s;
}
.text-area span:nth-of-type(3){
animation-delay: .2s;
}
.text-area span:nth-of-type(4){
animation-delay: .3s;
}
.text-area span:nth-of-type(5){
animation-delay: .4s;
}
.text-area span:nth-of-type(6){
animation-delay: .5s;
}
.text-area span:nth-of-type(7){
animation-delay: .6s;
}
.text-area span:nth-of-type(8){
animation-delay: .7s;
}
.text-area span:nth-of-type(9){
animation-delay: .8s;
}
.text-area span:nth-of-type(10){
animation-delay: .9s;
}
.text-area span:nth-of-type(11){
animation-delay: .10s;
}
.text-area span:nth-of-type(12){
animation-delay: .11s;
}
@keyframes animate{
60%{
transform: translate(20px, 0) scale(1);
color: white;
}
80%{
transform: translate(20px, 0) scale(1);
color: white;
}
99%{
transform: translate(0) scale(1.2);
color: #2a8c54;
}
100%{
transform: translate(0) scale(1);
color: white;
opacity: 1;
}
}
</code>
<code>**CSS**
body{
background-image: url(tekkenbackgroung.jpg);
background-size: cover;
-webkit-background-size: cover; /*Find out what this means?*/
background-position: center center;
height: 100vh; /*Find out what this means too?*/
}
.wrapper{
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
}
.wrapper p{
font-size: 60px;
letter-spacing: 2px;
margin: 15px 0;
color: white;
font-weight: bold;
}
span{
font-size: 30px;
letter-spacing: 2px;
margin: 15px 0;
color: white;
font-weight: bold;
text-transform: uppercase;
}
.text-area{
font-size: 100px;
font-weight: bold;
letter-spacing: -5px;
}
.text-area span{
color: #262626;
opacity: 0;
transform: translate(-300px, 0) scale(0);
animation-name: animate;
animation: animate 3s forwards;
display: inline-block;
}
.text-area span:nth-of-type(2){
animation-delay: .1s;
}
.text-area span:nth-of-type(3){
animation-delay: .2s;
}
.text-area span:nth-of-type(4){
animation-delay: .3s;
}
.text-area span:nth-of-type(5){
animation-delay: .4s;
}
.text-area span:nth-of-type(6){
animation-delay: .5s;
}
.text-area span:nth-of-type(7){
animation-delay: .6s;
}
.text-area span:nth-of-type(8){
animation-delay: .7s;
}
.text-area span:nth-of-type(9){
animation-delay: .8s;
}
.text-area span:nth-of-type(10){
animation-delay: .9s;
}
.text-area span:nth-of-type(11){
animation-delay: .10s;
}
.text-area span:nth-of-type(12){
animation-delay: .11s;
}
@keyframes animate{
60%{
transform: translate(20px, 0) scale(1);
color: white;
}
80%{
transform: translate(20px, 0) scale(1);
color: white;
}
99%{
transform: translate(0) scale(1.2);
color: #2a8c54;
}
100%{
transform: translate(0) scale(1);
color: white;
opacity: 1;
}
}
</code>
**CSS**
body{
background-image: url(tekkenbackgroung.jpg);
background-size: cover;
-webkit-background-size: cover; /*Find out what this means?*/
background-position: center center;
height: 100vh; /*Find out what this means too?*/
}
.wrapper{
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
}
.wrapper p{
font-size: 60px;
letter-spacing: 2px;
margin: 15px 0;
color: white;
font-weight: bold;
}
span{
font-size: 30px;
letter-spacing: 2px;
margin: 15px 0;
color: white;
font-weight: bold;
text-transform: uppercase;
}
.text-area{
font-size: 100px;
font-weight: bold;
letter-spacing: -5px;
}
.text-area span{
color: #262626;
opacity: 0;
transform: translate(-300px, 0) scale(0);
animation-name: animate;
animation: animate 3s forwards;
display: inline-block;
}
.text-area span:nth-of-type(2){
animation-delay: .1s;
}
.text-area span:nth-of-type(3){
animation-delay: .2s;
}
.text-area span:nth-of-type(4){
animation-delay: .3s;
}
.text-area span:nth-of-type(5){
animation-delay: .4s;
}
.text-area span:nth-of-type(6){
animation-delay: .5s;
}
.text-area span:nth-of-type(7){
animation-delay: .6s;
}
.text-area span:nth-of-type(8){
animation-delay: .7s;
}
.text-area span:nth-of-type(9){
animation-delay: .8s;
}
.text-area span:nth-of-type(10){
animation-delay: .9s;
}
.text-area span:nth-of-type(11){
animation-delay: .10s;
}
.text-area span:nth-of-type(12){
animation-delay: .11s;
}
@keyframes animate{
60%{
transform: translate(20px, 0) scale(1);
color: white;
}
80%{
transform: translate(20px, 0) scale(1);
color: white;
}
99%{
transform: translate(0) scale(1.2);
color: #2a8c54;
}
100%{
transform: translate(0) scale(1);
color: white;
opacity: 1;
}
}
New contributor
JPs GamingWorld is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.