Блог

Я довольно новичок в css и делаю несколько анимаций для сайта друзей. Хотя, похоже, я столкнулся с проблемой.

Следующая анимация представляет собой эффект отскока для текстового поля:

 .text {
    animation: text-pop-up-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
}

@keyframes text-pop-up-top {
  0% {
    transform: translateY(0);
    transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    transform: translateY(-50px);
    transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
  

Но текст отскакивает слишком высоко и перекрывает другой текст. Можно ли установить высоту так, чтобы она увеличивалась только на половину установленной высоты? Прошу прощения, если это простое решение, я не смог его понять. Я действительно ценю помощь.

Строка, которую вы хотите настроить, это:

 transform: translateY(-50px);
  

Попробуйте настроить его на:

 transform: translateY(-25px);
  

Обновить

Вы также можете настроить последнюю часть text-shadow , чтобы уменьшить вертикальное расстояние тени, чтобы оно соответствовало пониженному translateY значению.

Измените это:

 text-shadow: … 0 50px 30px rgba(0, 0, 0, 0.3);
              /* ^^ */
  

Для этого:

 text-shadow: … 0 25px 30px rgba(0, 0, 0, 0.3);
              /* ^^ */
  

jsFiddle