Анимация псевдоэлементов

Псевдоэлементы это словно получение дополнительных элементов DOM за просто так. Они позволяют добавлять дополнительный контент, оформлять и многое другое на наших страницах без добавления дополнительных HTML, а также они могут быть анимированными. В этой статье мы будем использовать псевдоэлемент для добавления визуального оформления к кнопке.

Псевдоэлементы

С CSS мы можем задать псевдоэлемент используя ::before или ::after. Псевдоэлемент находится внутри вашего элемента, между элементом и любым содержимым. Так как он действует как элемент самостоятельно, то может быть стилизованым, позиционируемым и многое другое. Код выглядит приблизительно вот так:

.pebble::before {
  ...
}
.pebble::after {
  ...
}

На этой стадии наш элемент .pebble имеет два присоединенных виртуальных элемента и мы можем стилизовать их по мере необходимости.

Обратите внимание на "::" вместо ":"

Обычно мы используем двойное двоеточие :: для обозначения псевдоэлементов (в отличие от псевдоклассов, как :hover, :first-child). Если хотите поддержку IE8, то лучше заменить на одиночный :. Другие браузеры и новые версии IE поддержуют двойные.

Не забудьте о "content"

При добавлении псевдоэлементов, одну вещь всегда необходимо иметь в виду - указать свойство content, прежде чем они станут видимыми на странице. Так как псевдоэлемент создается в состоянии контента, то мы можем обмануть его появление с помощью пустого содержимого, например, так:

.pebble::before {
  content: ""
  ... more styling goes here...
}

Это дает убедиться, что элемент виден на экране.

Например: блестящая кнопка

В этом примере мы используем псевдоэлемент для создания эффекта сияния при наведении мыши на кнопку. Вот пример этого в действии (наведите или нажмите, чтобы увидеть эффект).

Для начала немного HTML:

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

Добавляем эффект блеска

Эффект яркого блеска представляет собой линейный градиент, который проходит через кнопку. Чтобы создать это мы используем псевдоэлемент afterи первоначальное положение будет вне кнопки:

button::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}

Эффект блеска состоит из градиента от цвета кнопки до белого и обратно. На данном этапе эффект находится за пределами кнопки.

Нам нужно скрыть слой с блеском так, чтобы он показывался только при наведении курсора мыши. Для этого используем свойство overflow со значением hidden. Поскольку псевдоэлемент находится внутри кнопки, это означает, что это позиционирование вне ее предела и его не будет видно.

button {
  background: #e5ac8e;
  color: #fff;
  font-size: 14px;
  border-radius: 0.5em;
  padding: 0 1em;
  position: relative;
  overflow: hidden;
  line-height: 32px;
}

Я поместил некоторые другие стили кнопке, что придаст ей собственный вид. Единственное, что следует отметить, то это применение position: relative. Я добавил это свойство для абсолютного позиционирования псевдоэлемента и это будет находиться внутри кнопки. Указания позиции: абсолютно размещенный элемент будет находиться в пределах родительского элемента.

Добавление анимации

Поскольку мы будем использовать анимацию в этом примере, то нужно выполнить два шага. Первый: сообщить браузеру, что при наведении курсора мыши на элемент(кнопку) будет задействована анимация. Второе: устанавливаем, что именно эта анимация использует ключевые кадры.

Добавляем состояние при наведении курсора мыши путем наложения afterна hover:

button:hover::after, button:focus::after { animation: sheen 1s forwards; }

Здесь мы говорим браузеру, что при наведении мышки, псевдоэлемент afterбудет animation. Имя анимации "sheen", продолжается 1 секунду и прекратится в конце без повторения.

Последовательность имеет значение здесь. Если использовать  ::after:hover,то это не будет работать при наведении курсора мыши, так как это будет говорить браузеру реагировать на самого псевдоэлемента.

Я также добавил состояние в фокусе. Это означает, что посетитель при табуляции через страницу сможет увидеть эффект блеска без необходимости наведения курсора мыши. (Спасибо, Šime Vidas, за подсказку)

Давайте установим keyframes для анимации:

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}

Нам нужен лишь один ключевой кадр в этом примере. Начиная с позиции (0%), это подразумеваемая начальная позиция псевдоэлемента и мы опишем только конечное положение. В этом примере конечная позиция расположена в верхнем правом углу кнопки. Браузер будет анимировать эффект блеска через кнопку для нас.

Браузер

Свойство анимации хорошо поддерживается, как и псевдоэлементы. Хорошой практикой является добавление префиксов -webkit и -moz для keyframesи любых трансформаций.