Анимированные шапки для сайта на CSS

<div class="animiron-vannaya">
<h1 class="adumyam-pumesed">ZorNet.Ru</h1>
<p class="adlozhen-kamavian">Здесь будет описание, которое появляется снизу из под шапки.</p>
</div>

.animiron-vannaya {
/* Задаём относительное позиционирование */
position: relative;
/* Размер шапки сайта */
width: 100%;
height: 250px;
overflow: hidden;
/* Фон шапкм сайта */
background: steelblue;
/* Подключаем анимацию */
animation: main-hed 15s linear;
}
/* Название сайта */
.adumyam-pumesed{
/* Позиционируем абсолютно, относительно блока animiron-vannaya */
position: absolute;
left: -2em;
right: -2em;
top: 30%;
/* Оформляем шрифт */
color: #fff;
font-family: Monotype Corsiva;
letter-spacing: 0.3em;
text-align: center;
text-transform: uppercase;
/* Подключаем анимацию */
animation: main-titl 15s linear;
}
/**/
.adlozhen-kamavian{
/* Позиционируем абсолютно, относительно блока animiron-vannaya */
position: absolute;
right: -2em;
left: -2em;
top: 50%;
/* Оформляем шрифт */
color: #fff;
font-family: Georgia;
font-size: 16px;
letter-spacing: 0.2em;
text-align: center;
font-style: italic;
/* Подключаем анимацию */
animation: main-descript 15s linear;
}
/* Анимация фона шапки сайта */
@keyframes main-hed {
0% {
/* Начальный цвет */
background: #28014D;
}
/* Конечный цвет */
100% {
background: steelblue;
}
}

/* Анимация названия сайта */
@keyframes main-titl{
0% {
/* Полная прозрачность */
opacity: 0;
/* Масштабируется по вертикали и горизрнтали с нуля */
transform: scale(0);
}
100% {
/* Полная непрозрачность */
opacity: 1;
/* Конечный масштаб 1 х 1 */
transform: scale(1);
}
}

/* Анимация описания сайта */
@keyframes main-descript {
0% {
/* Начало анимации в точке внизу шапки сайта */
transform: translateY(6em);
/* Полная прозрачность */
opacity: 0;
}
/* Возрастание непрозрачности */
50% {
opacity: 0.1;
}
75% {
opacity: 0.3;
}
100% {
/* Завершение анимации в точке позиционирования */
transform: translateY(0);
/* Полная непрозрачность */
opacity: 1;
}
}

<div class="katsepn-blok">
  <span class="nokoles">ZorNet.Ru — сайт для вебмастера</span> <div class="zvezdochka1"></div>
<div class="zvezdochka2"></div>
<div class="zvezdochka3"></div>
<div class="zvezdochka4"></div>
<div class="zvezdochka5"></div>
<div class="zvezdochka6"></div>
<div class="zvezdochka7"></div>
<div class="zvezdochka8"></div>
<div class="zvezdochka9"></div>
<div class="zvezdochka10"></div>
</div>

.katsepn-blok {
  width: 715px;
  height: 218px;
  background-image: url(http://zornet.ru/ABVUN/Aba/detunis/129a.jpg);
  position: relative;  
}

.zvezdochka1,
.zvezdochka2,
.zvezdochka3,
.zvezdochka4,
.zvezdochka5,
.zvezdochka6,
.zvezdochka7,
.zvezdochka8,
.zvezdochka9,
.zvezdochka10 {
  position: absolute;
  border-radius: 50%/50%;
  background-image: radial-gradient(white, black);
  width: 3px;
  height: 3px;
}

.zvezdochka1 {
  top: 8%;
  left: 3%;
  animation: zvezdochka1 4s 3s linear infinite;
}
.zvezdochka2 {
  top: 3%;
  left: 10%;
  animation: zvezdochka2 2s linear infinite;
}
.zvezdochka3 {
  top: 15%;
  left: 25%;
  animation: zvezdochka3 5s 1s linear infinite;
}
.zvezdochka4 {
  top: 12%;
  left: 35%;
  animation: zvezdochka4 6s 2s linear infinite;
}
.zvezdochka5 {
  top: 23%;
  left: 47%;
  animation: zvezdochka5 2.5s 1s linear infinite;
}
.zvezdochka6 {
  top: 11%;
  left: 60%;
  animation: zvezdochka6 7s linear infinite;
}
.zvezdochka7 {
  top: 20%;
  left: 70%;
  animation: zvezdochka7 2s 1s linear infinite;
}
.zvezdochka8 {
  top: 12%;
  left: 80%;
  animation: zvezdochka8 4s linear infinite;
}
.zvezdochka9 {
  top: 30%;
  left: 90%;
  animation: zvezdochka9 3.5s linear infinite;
}
.zvezdochka10 {
  top: 7%;
  left: 98%;
  animation: zvezdochka10 6s linear infinite;
}

.nokoles {
  z-index: 1;
  position: absolute;
  left: 27%;
  top: 40%;
  z-index: 1;
  font: 30px Impact;
  color: hsl(240, 20%, 15%);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  text-shadow: -1px -1px hsl(50, 71%, 58%), -2px -2px hsl(50, 57%, 49%), -1px 1px hsl(50, 58%, 44%), -2px 2px hsl(50, 56%, 56%), 1px 1px hsl(50, 80%, 63%), 2px 2px hsl(50, 63%, 56%), 1px -1px hsl(50, 61%, 57%), 2px -2px hsl(50, 63%, 54%);
}

@keyframes zvezdochka2 {
  0% {
  opacity: 1;
  }
  100%{
  opacity: 0;
  }
}
@keyframes zvezdochka5 {
  0% {
  opacity: 1;
  }
  100%{
  opacity: 0;
  }
}
@keyframes zvezdochka7 {
  0% {
  opacity: 1;
  }
  100%{
  opacity: 0;
  }
}
@keyframes zvezdochka9 {
  0% {
  opacity: 1;
  }
  100%{
  opacity: 0;
  }
}

/* Падающие */

@keyframes zvezdochka1 {
  0% {
  width: 1px;
  }
  7% {
  width: 6px;
  opacity: 1;
  transform: translate(150px, 150px);  
  }
  8% {
  opacity: 0;
  }
  100% {
  opacity: 0;
  }
}
@keyframes zvezdochka3 {
  0% {
  width: 3px;
  }
  12% {
  width: 10px;
  opacity: 1;
  transform: translate(-200px, 150px);  
  }
  13% {
  opacity: 0;
  }
  100% {
  opacity: 0;
  }
}
@keyframes zvezdochka4 {
  0% {
  width: 3px;
  }
  10% {
  width: 10px;
  opacity: 1;
  transform: translate(200px, 150px);  
  }
  11% {
  opacity: 0;
  }
  100% {
  opacity: 0;
  }
}
@keyframes zvezdochka6 {
  0% {
  width: 3px;
  }
  10% {
  width: 10px;
  opacity: 1;
  transform: translate(-400px, 150px);  
  }
  11% {
  opacity: 0;
  }
  100% {
  opacity: 0;
  }
}
@keyframes zvezdochka8 {
  0% {
  width: 3px;
  }
  10% {
  width: 10px;
  opacity: 1;
  transform: translate(-300px, 150px);  
  }
  11% {
  opacity: 0;
  }
  100% {
  opacity: 0;
  }
}
@keyframes zvezdochka10 {
  0% {
  width: 3px;
  }
  10% {
  width: 10px;
  opacity: 1;
  transform: translate(-550px, 150px);  
  }
  11% {
  opacity: 0;
  }
  100% {
  opacity: 0;
  }
}

<div class="kavona-cudasa">
<p class="name">Сайт ZorNet.Ru</p>
<ul class="kasamoloda">
<li class="desalun"></li>
<li class="desalun"></li>
<li class="desalun"></li>
<li class="desalun"></li>
</ul>
</div>

.kavona-cudasa {
margin: 0;
overflow: hidden;
/* Цвет фона в формате hsl, радиальный градиент */
background: radial-gradient(white 80px, hsl(30, 100%, 60%) 50em);
position: relative;
height: 200px;
width: 600px;
}
/* Позиционируем эффект по центру*/
.kasamoloda {
position: absolute;
left: 50%;
top: 50%;
/* Убираем маркеры списка */
list-style: none;
/* Подключаем анимацию вращения */
animation: 30s rotate infinite linear;
}
/* Границы с тенью при помощи псевдоэлементов */
.desalun,
.desalun:before,
.desalun:after {
position: absolute;
border: 0 solid transparent;
border-width: 2em 20em;
width: 0px;
height: 0px;
box-shadow: 0 0 2em 0.5em #f9e8e8;
}
/* Разбег лучей */
.desalun {
left: -20em;
top: 50%;
margin-top: -2em;
transform: rotate(.3deg);
}
/* Длина лучей зависит от позиции*/
.desalun:before,
.desalun:after {
left: -20em;
top: -2em;
display: block;
content: "";
}
.desalun:before {
transform: rotate(60deg);
}
.desalun:after {
transform: rotate(-60deg);
}
/* Добавляем смещение для каждой группы лучей с помощью псевдокласса */
.desalun:nth-child(2){
transform: rotate(15deg);
}
.desalun:nth-child(3){
transform: rotate(30deg);
}
.desalun:nth-child(4){
transform: rotate(45deg);
}

@keyframes rotate {
100% {
transform: rotate(90deg);
}
}

.name {
z-index: 1;
position: absolute;
left: 27%;
top: 20%;
z-index: 1;
font: bold 40px 'Monotype Corsiva';
  color: hsl(70, 77%, 36%);
text-align: center;
/* Обводка текста тенями */
text-shadow: -1px -1px #f79617,
-2px -2px #f79617,
-1px 1px #f79617,
-2px 2px #f79617,
1px 1px #f79617,
2px 2px #f79617,
1px -1px #f79617,
2px -2px #f79617,
}