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

Live Preview

CSS Tutorial

Properties Reference

CSS Properties Reference Guide

Animated Text in CSS

Source Code :

css/style.css

Output

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