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

Text animation


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