Animated Text in CSS


On this project we'll be focusing on CSS Text Animations. These are simple and easy to integrate into your design, with pure HTML and CSS.

These CSS text animations can be used to make your webpage more interesting and give it a unique design and feel. You have to be careful though, not all of these CSS text effects will benefit every design. A great example of how you can take advantage of CSS text animation which is triggered by changing colors.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Text</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Tutor Joes</h1>
</body>
</html>

css/style.css


@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');


*{
  padding: 0;
  margin: 0;
  
}
body{
  width: 100vw;
  height: 100vh;
  font-family: 'Lobster', cursive;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
}

h1{
  font-size: 200px;
  background: rgb(53,219,164);
background: linear-gradient(140deg, rgba(53,219,164,1) 9%, rgba(0,212,255,1) 80%);
color:transparent;
background-clip: text;
-webkit-background-clip: text;
background-size: 500% 500%;
animation:joes 2s ease infinite;
}

@keyframes joes {
  0%{
    background-position: 0%;
  }
  50%{
    background-position:100%;
  }
  100{
    background-position: 0%;
  }
}

Output

Animated Text
Live Preview


CSS Tutorial


Properties Reference


Cascading Style Sheet


Flexbox Tutorial


CSS Grid Tutorial


Transitions Properties


CSS Properties with Examples


CSS Selectors


CSS Pseudo Elements


CSS Attribute Selectors


Input Pseudo Classes


CSS Examples


CSS Animation Projects