Использование @keyframes с препроцессором SASS

Использование @keyframes с препроцессором SASS.

Базовый пример использования @keyframes в SASS:

@keyframes name-of-animation
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

Создаем миксин, чтобы добавить вендорный префикс:

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content

Используем миксин в SASS:

+keyframes(name-of-animation)
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)
CSS счетчики

CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS…

Валидация формы обратной связи с помощью Javascript

В одной из статей я приводил пример, валидации формы с помощью CSS, но с ограниченными…

Анимация png-спрайта по слайдам

Недавно применял на сайте интересную анимацию, выглядит она как гифка, но по факту это одна…

301 Redirect в ModX

Столкнулся с проблемой редиректа в ModX. Стандартные варианты редиректа не работают. Нашел такое решение: Если…

Ответить