Эффект растягивания текста на изображении с помощью CSS3

Эффект растягивания появляющегося текста, используемый в данной статье, состоит из двух частей, каждая из которых выполняется после того, как другая завершится. Добиться данного эффекта можно лишь с помощью использования директивы @keyframes в CSS3.

Эффект, описанный в данной статье, нельзя получить, используя лишь CSS свойство transition, которое использовалось в упомянутых выше статьях. Данный эффект состоит из двух анимаций, каждая из которых начинается только после завершения предыдущей.

 Демо

HTML код:

<a href="#" title="How to improve CSS code"><img src="nature.jpg" alt=""></a>

Вышеприведенный код – это пример обычной ссылки, внутри которой размещено изображение. Атрибут title у изображения будет использован в качестве появляющегося текста.

CSS стили, представленные в данной статье, применяются к каждой ссылке, например, к той, что находится сверху. А теперь давайте рассмотрим одну такую ссылку и узнаем, как наш эффект работает.

Как уже упоминалось, сам эффект состоит из двух анимаций, которые применяются к блоку, в котором содержится появляющийся текст. Данный блок добавляется с помощью CSS псевдо-элемента before, а текст берется из атрибута title у текущей ссылки.
По умолчанию блок с появляющимся текстом скрыт, т.е. в данном случае он схлопнут по вертикали. Данное условие выполняется благодаря использованию функции scaleY, со значением равным нулю, CSS свойства transform. В это же время блок растягивается по горизонтали с помощью функции scaleX, со значением равным 4, CSS свойства transform. Текст в блоке будет прозрачным, т.к. мы использовали RGBA запись цвета и указали значение для альфа-канала равное нулю.

Когда пользователь наводит курсор мыши на изображение, первая анимация растягивает текст по вертикали, чтобы он был видимым. Данная анимация изменяет значение функции scaleY на 1. После завершения первой анимации, начинает выполняться вторая: она схлопывает блок до исходных размеров, изменяя значение функции scaleX на 1 и, одновременно, делая текст непрозрачным благодаря изменению значения альфа-канала на 1.

Когда пользователь уводит курсор с изображения, обе анимации снова выполняются, но уже в обратном порядке.
Помимо блока с появляющимся текстом, есть еще один блок, который добавляется с помощью CSS псевдо-элемента after. Данный блок всегда является прозрачным и никак не связан с анимациями. Его единственное предназначение – исправить баг, возникающий при наведении, в IE10.

CSS стили:

@-webkit-keyframes appearing {
  0%{
    -webkit-transform: scaleX(4) scaleY(0) translateY(-50%);
  }
  50%{
    -webkit-transform: scaleX(4) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 0);
  }
  100% {
    transform: scaleX(1) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 1);
  }
}

@keyframes appearing {
  0%{
    transform: scaleX(4) scaleY(0) translateY(-50%);
  }
  50%{
    transform: scaleX(4) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 0);
  }
  100% {
    transform: scaleX(1) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 1);
  }
}

@-webkit-keyframes disappearing {
  0%{
    -webkit-transform: scaleX(1) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 1);
  }
  50%{
    -webkit-transform: scaleX(4) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-transform: scaleX(4) scaleY(0) translateY(-50%);
  }
}

@keyframes disappearing {
  0%{
    transform: scaleX(1) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 1);
  }
  50%{
    transform: scaleX(4) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 0);
  }
  100% {
    transform: scaleX(4) scaleY(0) translateY(-50%);
  }
}

@-webkit-keyframes positioning {
  0%{ z-index: 10; }
  99%{ z-index: 10; }
  100% { z-index: 1; }
}

@keyframes positioning {
  0%{ z-index: 10; }
  99%{ z-index: 10; }
  100% { z-index: 1; }
}

a {
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-decoration: none;
}

a:before {
  -webkit-animation: disappearing 500ms ease-in-out forwards;
  animation: disappearing 500ms ease-in-out forwards;
  background-color: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0);
  content: attr(title);
  display: block;
  font-family: Tahoma;
  font-size: 24px;
  font-weight: bold;
  padding: 5% 2%;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  width: 96%;
  z-index: 5;
}

a img {
  -webkit-animation: positioning 510ms ease-in-out forwards;
  animation: positioning 510ms ease-in-out forwards;
  border: none;
  display: block;
  position: relative;
  z-index: 10;
}

a:after {
  opacity: 0;
  background-color: white;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 15;
}

a:hover:before {
  -webkit-animation: appearing 500ms ease-in-out forwards;
  animation: appearing 500ms ease-in-out forwards;
}

Данные CSS стили прекрасно работают в последних версиях современных браузеров, таких как Firefox, Chrome, Opera, Safari и Internet Explorer 10 версии и выше.

See the Pen Эффект растягивания текста на изображении с помощью CSS3 by vavik (@vavik96) on CodePen.

Источник