Animated Letters in CSS

Font design or typography is intrinsic in clearly expressing a message and attracting visitors to a website. Font developers help to ensure that the text is inviting to readers.

This project highlights pure CSS animated text effects that web owners and admins can use for their web pages.

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>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h2 class="text top" data-letters="Tutor Joes">
    Tutor Joes
  </h2>
  <h2 class="text bottom" data-letters="Tutor Joes">
    Tutor Joes
  </h2>
  <h2 class="text left" data-letters="Tutor Joes">
    Tutor Joes
  </h2>
  <h2 class="text right" data-letters="Tutor Joes">
    Tutor Joes
  </h2>
</body>
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');


*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  width: 100vw;
  height: 100vh;
  font-family: 'Lato', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px 0;
  background-color: aliceblue;
}


.text{
  font-size: 70px;
  color: #4C4C4C;
  display: inline-block;
  -webkit-text-stroke-width: 0px;
  text-stroke-width: 0px;
  position: relative;  
}

.text::before{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: attr(data-letters);
  overflow: hidden;
}
/*-----------------------------------*/
.text.top:before {
  transition: 1s ease-in-out;
  color: #FC427B;
  height: 0;
  z-index: 1;
}

.text.top:hover:before {
  height: 100%;
}

/*-----------------------------------*/
.text.bottom {
  color: #FC427B;
}
.text.bottom:before {
  transition: 1s ease-in-out;
  color: #4C4C4C;
  height: 100%;
  z-index: 1;
}
.text.bottom:hover:before {
  height: 0;
}
/*-----------------------------------*/
.text.left:before {
  transition: 1s ease-in-out;
  color: #FC427B;
  width: 0;
  z-index: 999;
}
.text.left:hover:before {
  width: 100%;
}
/*-----------------------------------*/
.text.right {
  color: #FC427B;
}
.text.right:before {
  transition: 1s ease-in-out;
  color: #4C4C4C;
  width: 100%;
  z-index: 999;
}
.text.right:hover:before {
  width: 0;
}

Output

Animated Letters 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