анимация текста (3 варианта)

Приветствую, читателей и гостей блога. Предлагаю вашему вниманию 3 варианта оформления текста или заголовка. А именно, анимированный текст на чистом CSS. Думаю, что кому - нибудь и придётся по душе при оформлении сообщений или страниц.

Чтобы просмотреть каждый из вариантов, скопируйте нужный код и установите его в этом редакторе.

Вариант 1. Самый простой способ . Переливающийся текст. Можно настроить интервал мигания и задать нужный цвет.

Код

<div class="tsanext-animation">шпаргалки блогерши</div>
<style>
.tsanext-animation {
  font-size: 79px;
  font-family: 'sonos-logoregular';
  text-align: center;
  background: -webkit-linear-gradient(left, #503a86, #de494f, #ea8d5b, #ca497a, #6148a0);
  background: linear-gradient(left, #33235B, #D62229, #E97639, #792042, #33235B);
  background-size: 3200px 200px;
  margin-top: 20vh;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-animation: animate-logo;
  -webkit-animation-delay: 0;
  -webkit-animation-duration: 7s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  transition: font-size 500ms ease-in-out;
}
}
@media only screen and (min-width: 40.063em) {
  .tsanext-animation {
  margin-top: 30vh;
  font-size: 80px;
  }
}
@media only screen and (min-width: 64.063em) {
  .tsanext-animation {
  margin-top: 25vh;
  font-size: 79px;
  }
}
@media only screen and (min-width: 90.063em) {
  .tsanext-animation {
  margin-top: 20vh;
  font-size: 80px;
  }
}
@media only screen and (min-width: 120.063em) {
  .tsanext-animation {
  margin-top: 15vh;
  font-size: 79px;
  }
}
@-webkit-keyframes animate-logo {
  0% {
  background-position: 0 3200px;
  }
  100% {
  background-position: 3200px 0;
  }
}</style>

Вариант 2. Прыгающие буковки. Используя свойство  CSS3 @keyframe создадим своеобразный 3D-эффект.

Код

<div class='is-animate'>

  <div class="l">П</div>

  <div class="l">Р</div>

  <div class="l">И</div>

  <div class="l">В</div>

  <div class="l">Е</div>

  <div class="l">Т</div>

  <div class="l">И</div>

  <div class="l">К</div>

</div>

<style>


.is-animate {

        background: #F08080;

    box-sizing: border-box;

    font-size: 66px;

    display: -webkit-inline-box;

    padding: 14px;

    border-radius: 7px;

}

.is-animate > div {

    animation-name: style;

    display: -webkit-inline-box;

    color: #fff;

    padding: 9px;

    background:#F08080;

    font-family: 'Indie Flower', cursive;

    box-shadow: 2px 2px 9px 2px;

}

.l{

  animation: letterspacing 1s infinite alternate cubic-bezier(.2, 0, 0, 1);

}
.is-animate > div {

  animation-duration: 1s;

  animation-fill-mode: both;

  animation-iteration-count: infinite;

}



.is-animate > div:nth-child(1) { animation-delay: 0.0s }

.is-animate > div:nth-child(2) { animation-delay: 0.1s }

.is-animate > div:nth-child(3) { animation-delay: 0.2s }

.is-animate > div:nth-child(4) { animation-delay: 0.3s }

.is-animate > div:nth-child(5) { animation-delay: 0.4s }

.is-animate > div:nth-child(6) { animation-delay: 0.5s }

.is-animate > div:nth-child(7) { animation-delay: 0.6s }

@keyframes style {

  from {

    transform: scale3d(1, 1, 1);

  }

  30% {

    box-shadow: 0px 0px 0px 0px;

    transform: scale3d(1.25, 0.75, 1);

  }

  40% {

    transform: scale3d(0.75, 1.25, 1);

  }

  50% {

    transform: scale3d(1.15, 0.85, 1);

  }

  65% {

    transform: scale3d(.95, 1.05, 1);

  }

  75% {

    transform: scale3d(1.05, .95, 1);

  }

  to {

    transform: scale3d(1, 1, 1);

  }

}
@keyframes letterspacing {

  0% {

    filter: blur(0.1rem);

  }
  100% {

    filter: blur(0.5rem);

  }

    to {

       letter-spacing: none;

        filter: blur(0rem);

  }

}

</style>

Вариант 3. При наведении курсора текст начинает "дёргаться".

Код

<p class="text animated rubberBand">НАВЕДИ НА МЕНЯ</p>

<style>

.text {
  text-align: center;
  margin-top: 20px;
  color: #F47C0A;
  font-size: 2.0em;
  font-family: sans-serif;
  text-transform: uppercase;
}

.animated:hover {
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  cursor:pointer;
}
@keyframes rubberBand {
  0% {transform: scale(1);}
  30% {transform: scaleX(1.15) scaleY(0.75);}
  40% {transform: scaleX(0.75) scaleY(1.25);}
  60% {transform: scaleX(1.15) scaleY(0.85);}
  100% {transform: scale(1);}
}
p.rubberBand {
  animation-name: rubberBand;
}
</style>

Анимация применяется где угодно. С помощью её можно двигать любые элементы страницы -  текст, картинку, произвольные фигуры,  что придет на ум. Если решите применить у себя в блоге, просто в редакторе сообщения или страницы, перейдите в режим HTML и в нужном месте установите код.

Посмотрите ещё некоторые эффекты для текста

Текстовые эффекты на CSS
Мигающий текст

Всем добра и до встречи.

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :