<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Text Animation Effects</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2 data-text="Moviebuff...">🎬🎦<div>Moviebuff</div></h2>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&diaplay=swap');
{
  margin: 0;
  padding: 0;
  fox-family: 'Poppins', sans-serif;
}
body
{
  display: flex;
  justify-content: cente;
  align-items: center;
  min-height: 100vh;
  background: #252839;
}
h2
{
  position: relative;
  font-size: 14vw;
  color: #252839;
  -webkit-text-stroke: 0.3vw #383d52;
  text transform: uppercase;
}

h2::before
{
  content: attr(data-text);
  position: absolute;
  top: 60%;
  left: 50%;
  width: 0;
  height: 100%;
  color: #01fe87;
  -webkit-text-stroke: 0vw #383d52;
  border-right: 2px solid #01fe87;
  overflow: hidden;
  animation:animate 10s linear infinite;
}
@keyframes animate
{
   0%,10%,100%
   {
        width: 0;
   }
   70%,90%
   {
       width: 100%;
   }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.