<div class="rotating-text-wrapper"> 
  <h2>Bienvenido al Blog de Joseca</h2> 
  <h2>Esto es animación al texto</h2> 
  <h2>usando HTML y CSS</h2> 
</div>

.rotating-text-wrapper{ 
  height: 90vh; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
} 
.rotating-text-wrapper h2{ 
  font-size: 2.5em; 
  margin: 0; 
  padding: 0.3em; 
  color: #fff; 
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); 
  animation-duration: 6s; 
  animation-iteration-count: infinite; 
  opacity: 0; 
} 
.rotating-text-wrapper h2:nth-child(1){ 
  background-color: lightseagreen; 
  animation-name: rotating-text-1; 
} 
@keyframes rotating-text-1{ 
  0% { transform: translateY(200%); } 33% { transform: translateY(100%); opacity: 1; } 34% { opacity: 0; } 
} 
.rotating-text-wrapper h2:nth-child(2){ 
  background-color: tomato; 
  animation-name: rotating-text-2; 
} 
@keyframes rotating-text-2{ 33% { transform: translateY(100%); opacity: 0; } 66% { transform: translateY(0); opacity: 1; } 67% { opacity: 0; } 
} 
.rotating-text-wrapper h2:nth-child(3){ 
  background-color: cornflowerblue; 
  animation-name: rotating-text-3; 
} 
@keyframes rotating-text-3 { 
  66% { transform: translateY(0); opacity: 0; } 99% { transform: translateY(-100%); opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; } } @media screen and (max-width: 576px) { .rotating-text-wrapper { font-size: 0.7rem; } 
}