Переходы и анимации CSS3 очень полезны, но нередко они слишком идеальны. Обращали ли вы внимание, что компьютерные игры выглядят покадрово при 25-30 кадрах в секунду, а фильмы выглядят естественно при том же количестве кадров? Обычная видеокамера захватывает каждый кадр в течение 0,04 секунд. Все, что движется быстрее, выглядит слегка размыто. А игра, идеально создающая каждый кадр, без размытия движения может выглядеть несколько странно. 

К сожалению, невозможно создать размытие движения у HTML элементов. Но к счастью, у нас есть два стандартных свойства CSS3, которые могут помочь в этом: тень текста и тень блока.

Посмотрите демонстрацию работы размытия движения.

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

text-shadow: -5px 0 5px rgba(255,255,255,1);

Тень небольшая, но применение более ярко выраженной тени не обязательно будет выглядеть лучше.

Еще можно использовать свойство тени блока, используя цвет, подобный цвету рамки. На средине анимации ему заданы следующие значения:

box-shadow: -15px 0 10px -5px rgba(200,0,0,0.5); 

Такая запись означает:

• Отступ на -15px
• Размытие радиусом 10px
• Расстояние распространения -5px

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

Полное определение ключевых кадров передвигает элемент слева направо первые 50% анимации, после чего передвигает налево вторую половину времени. Таким образом, наибольшие значения свойств тени текста и тени блока заданы на 25% и 75% соответственно:

@keyframes motionblur {
  0%
  {
    left: 0;
    text-shadow: 0 0 0 rgba(255,255,255,0);
    box-shadow: 0 0 0 rgba(200,0,0,0);
  }
  5%
  {
    left: 0;
    transform-origin: 0 0;
    transform: scaleX(0.85);
  }
  25%
  {
    text-shadow: -5px 0 5px rgba(255,255,255,1);
    box-shadow: -15px 0 10px -5px rgba(200,0,0,0.5);
    transform: scaleX(1.1) skewX(-4deg);
  }
  50%
  {
    left: 300px;
    text-shadow: 0 0 0 rgba(255,255,255,0);
    box-shadow: 0 0 0 rgba(200,0,0,0);
    transform: scaleX(1) skewX(0deg);
  }
  55%
  {
    left: 300px;
    transform-origin: 100% 0;
    transform: scaleX(0.85);
  }
  75%
  {
    text-shadow: 5px 0 5px rgba(255,255,255,1);
    box-shadow: 15px 0 10px -5px rgba(200,0,0,0.5);
    transform: scaleX(1.1) skewX(4deg);
  }
  100%
  {
    left: 0px;
    text-shadow: 0 0 0 rgba(255,255,255,0);
    box-shadow: 0 0 0 rgba(200,0,0,0);
    transform: scaleX(1) skewX(0deg);
  }
} 

Несколько двухмерных трансформаций были добавлены, чтобы усилить эффект анимации.

Блок:

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

Обратите внимание, что использована довольно низкая скорость анимации, чтобы было лучше видно, что происходит.

Посмотрите демонстрацию работы размытия движения.

Этот эффект работает во всех новых версиях браузеров:

• Internet Explorer с 10 версии
• Firefox
• Chrome, Safari и Opera от 15 версии, хотя для них потребуется приставка производителя -webkit для всех свойств анимаций и трансформаций.

Единственное несколько странное поведение обнаруживается в браузере Internet Explorer версии 10. Браузер не показывает тени, если начальные и конечные значения не заданы однозначным образом, например:

text-shadow: 0 0 0 rgba(255,255,255,0);
box-shadow: 0 0 0 rgba(200,0,0,0);

Другими словами, браузер Internet Explorer версии 10 не будет анимировать, если значение начала задано как box-shadow: none. Возможно, это относится и к другим свойствам CSS, так что перед использованием стоит проверить.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:

• Анимированные полосы загрузки с использованием CSS3 и фонов SVG 
• Цикл уроков об анимациях CSS3. Часть 1. Основы. Что такое анимации? 
• Создание раздвигающейся галереи изображений с использованием только CSS3