Change Text

In this tutorial, you will learn how to change a text purely with CSS. The span's before pseudo element content is used to store each text. Watch the video below for a detailed tutorial.

HTML

<body>
  <h1>Lorem <span></span></h1>
</body>

CSS

body {
  margin: 0;
  background-color: #2e3537;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h1 {
  font-family: 'Arial', sans-serif;
  font-size: 5em;
  color: white;
}

span:before {
  content: '';
  animation: changeWord 5s infinite;
}

@keyframes  changeWord {
  0% {
    content: 'Ipsum';
  }
  50% {
    content: 'Dolor';
  }
  75% {
    content: 'Sit';
  }
  100% {
    content: 'Ipsum';
  }
}