/* эффекты мерцания текста

    пример использования:

    <h2 class="blink1">Образец 1</h2>

*/

/* плавно мигающий текст */

.blink1 {
  -webkit-animation: blink1 3s linear infinite;
  animation: blink1 3s linear infinite;
}
@-webkit-keyframes blink1 {
  0% { color: rgba(34, 34, 34, 1); }
  50% { color: rgba(34, 34, 34, 0); }
  100% { color: rgba(34, 34, 34, 1); }
}
@keyframes blink1 {
  0% { color: rgba(34, 34, 34, 1); }
  50% { color: rgba(34, 34, 34, 0); }
  100% { color: rgba(34, 34, 34, 1); }
}

/* переливающийся текст */

.blink5 {
  -webkit-animation: blink5 2s linear infinite;
  animation: blink5 2s linear infinite;
}
@-webkit-keyframes blink5 {
  0% { color: rgb(128, 0, 0); }
  50% { color: rgb(183, 65, 14); }
  100% { color: rgb(128, 0, 0); }
}
@keyframes blink5 {
  0% { color: rgb(128, 0, 0); }
  50% { color: rgb(183, 65, 14); }
  100% { color: rgb(128, 0, 0); }
}

/* блестящий текст */

@-webkit-keyframes flicker {
  50% {background-size: 7px 7px, 3px 3px;}
  100% {background-size: 3px 3px, 7px 7px;}
}
@keyframes flicker {
  50% {background-size: 7px 7px, 3px 3px;}
  100% {background-size: 3px 3px, 7px 7px;}
}
.blink3 {
  position: relative;
  font-weight: bold;
  color: #30084f;
}
.blink3:before {
  content: "";
  position:absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(255,255,255,1) 1px, rgba(255,255,255,0) 1px), radial-gradient(rgba(255,255,255,1) 1px, rgba(255,255,255,0) 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0% 50%;
  -webkit-animation: flicker .5s linear infinite alternate;
  animation: flicker .5s linear infinite alternate;
}

/* сверкающий текст */ 

@-webkit-keyframes blink6 {
 10% { transform: scale(1, 1) rotate(80deg); }
 20% { transform: scale(0, 0) rotate(160deg); }
 100% { transform: scale(0, 0) rotate(0deg); }
}
@keyframes blink6 {
 10% { transform: scale(1, 1) rotate(80deg); }
 20% { transform: scale(0, 0) rotate(160deg); }
 100% { transform: scale(0, 0) rotate(0deg); }
}
.blink6 {
  position: relative;
  display: inline-block;
  color: #fff;
  text-shadow: 0 0 10px #3d7a97;
  background: #064578;
}
.blink6:after, #blink6:before {
  content: "";
  position: absolute; top: 0; left: 0;
  display: block;
  width: 100px;
  height: 100px;
  background-image: 
    radial-gradient(rgba(255,255,255,1), rgba(255,255,255,0) 30%),
    linear-gradient(45deg, rgba(0,0,0,0) 49%, rgba(255,255,255,.4) 50%, rgba(0,0,0,0) 51%),
    linear-gradient(135deg, rgba(0,0,0,0) 49%, rgba(255,255,255,.4) 50%, rgba(0,0,0,0) 51%);
  -webkit-animation: blink6 10s linear infinite;
  animation: blink6 10s linear infinite;
  transform: scale(0, 0) rotate(0deg);
}
.blink6:before {
  top: -30%;
  right: 0; left: auto;
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}


/* светящийся текст */
@-webkit-keyframes pulsate {
 50% { color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff; }
}
@keyframes pulsate {
 50% { color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff; }
}
.blink7 {
  color: rgb(245,245,245);
  text-shadow: 0 -1px rgba(0,0,0,.1);
  -webkit-animation: pulsate 1.2s linear infinite;
  animation: pulsate 1.2s linear infinite;
}