Използване на Motion Blur в CSS3 анимации

За съжаление, не е възможно да се създаде замъгляване на движението върху HTML елементи. Но за щастие имаме две стандартни CSS3 свойства, които могат да помогнат с това: text-shadow и box-shadow.

Ако елементът се движи надясно, можете да приложите свойство text-shadow, което го разширява наляво, използвайки цвят, подобен на цвета на текста. В горния пример тестът започва и завършва без сянка. Но в средата на анимацията, на най-бързото място, се задава следното:

Сянката е малка, но нанасянето на по-изразена сянка не е задължително да изглежда по-добре.

Можете също да използвате свойството box-shadow, като използвате цвят, подобен на цвета на рамката. В средата на анимацията му се дават следните стойности:

Този запис означава:

  • Подложка с -15px
  • Размазване с радиус 10px
  • Разстояние на разпространение -5px

Разстоянието на разпространение е важно. Без него блоковата сянка би била забележимо по-голяма от рамката. В нашия пример стойност от около половината от радиуса на замъгляване е добра, но може да се наложи да я промените в зависимост от размера и посоката на елемента.

Пълното дефиниране на ключови кадри премества елемента отляво надясно за първите 50% от анимацията, след което го премества наляво за втората половина от времето. Така най-високите стойности на свойствата text-shadow и block-shadow са зададени съответно на 25% и 75%:

Добавени са няколко 2D трансформации за подобряване на ефекта от анимацията.

  • В началото се свива, така че изглежда, че е на път да отскочи.
  • Разтяга се и се накланя в средата на анимацията, за да създаде вид на ускоряване.
  • В края се връща към нормален размер.

Обърнете внимание, че използваната скорост на анимацията е доста ниска, за да се покаже по-добре товаслучва се.

Този ефект работи във всички нови версии на браузъра:

  • Internet Explorer от версия 10
  • Firefox
  • Chrome, Safari и Opera от версия 15, въпреки че изискват префикса -webkit producer за всички свойства на анимация и трансформация.

Единственото леко странно поведение се среща в Internet Explorer версия 10. Браузърът не показва сенки, освен ако началната и крайната стойност не са уникално зададени, например:

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