CSS Анимация текста (несколько примеров)


Здесь размещено несколько примеров CSS-анимации текста: появление сверху, эффект набора текста, появление с уменьшением, появление из глубины, выезжающий текст снизу. Также указаны основные значения используемые в демо-примерах.
Появление сверху
Запустить
{
  
0% { opacity: 0; transform: translate(0px,-1000px) rotate(0deg) ;  }
  
50% { opacity: 1;  }
  
60% { transform: translate(0px,30px) rotate(0deg) ;  }
  
80% { transform: translate(0px,-10px) rotate(0deg) ;  }
  
100% { transform: translate(0px,0px) rotate(0deg) ;  }
}
#demo1 {
   position: absolute;
  
overflow: hidden;
   text-align: center;
}
#wb_text2 {
   text-align: center;
}
Эффект набора текста
Запустить
@keyframes nabor-teksta {
  
0% { width: 0%;  }
}
#wb_text3 {
   position: absolute;
  
text-align: left;
  
overflow: hidden;
  
white-space: nowrap;
}
Появление с уменьшением
Запустить
@keyframes zoom-out {
  
0% { transform: rotate(0deg) scale(3.0,3.0) ; opacity: 0;  }
}
#demo3 {
   position: absolute;
  
overflow: hidden;
   text-align: center;
}
#wb_text4 {
   text-align: center;
}
Появление из глубины
Запустить
{
  
0% { transform: rotate(0deg) scale(0.3,0.3) ; opacity: 0;  }
  
50% { transform: rotate(0deg) scale(1.05,1.05) ; opacity: 1;  }
  
70% { transform: rotate(0deg) scale(0.9,0.9) ;  }
  
100% { transform: rotate(0deg) scale(1.0,1.0) ;  }
}
#demo4 {
   position: absolute;
   text-align: center;
}
#wb_text5 {
   position: absolute;
   text-align: center;
}
Выезжающий текст снизу
Запустить
{
  
0% { transform: translate(0px,50px) rotate(0deg) ; opacity: 0;  }
  
100% { transform: translate(0px,0px) rotate(0deg) ; opacity: 1;  }
}
#demo5 {
   position: absolute;
  
overflow: hidden;
  
text-align: center;
}
#wb_text6 {
   position: absolute;
   text-align: center;
}