CSS3 переходы и анимации очень полезны, но часто они слишком совершенны!
Вы когда-нибудь задумывались, почему компьютерные игры выглядят в шахматном режиме со скоростью 25-30 кадров в секунду, а фильмы выглядят естественно с той же скоростью? Типичная видеокамера захватывает каждый кадр за 0,04 секунды; все, что движется быстрее, будет выглядеть немного размытым. Однако игра, которая прекрасно создает каждый кадр без размытия в движении, может выглядеть немного странно.
К сожалению, невозможно создать размытие движения на элементах HTML. Черновая спецификация CSS3 Filter Effects может в конечном итоге помочь, но она имеет только экспериментальную поддержку, а эффект размытия ненаправленный. К счастью, у нас есть два других стандартных свойства CSS3, которые могут помочь: text-shadowbox-shadow
Посмотреть демонстрацию размытия в CSS3 …
Если объект перемещается вправо, мы можем применить text-shadow В приведенном выше примере текст начинается и заканчивается без тени. Однако на полпути анимации — самой быстрой точки — она установлена на:
text-shadow: -5px 0 5px rgba(255,255,255,1);
Это тонко, но применение более тяжелой тени не обязательно будет выглядеть эффективным.
Точно так же мы можем также использовать box-shadow На полпути он установлен на:
box-shadow: -15px 0 10px -5px rgba(200,0,0,0.5);
Это определяет:
- смещение по оси X -15px
- радиус размытия 10 пикселей и
- расстояние распространения -5px.
Распространение важно. Без этого box-shadow В моей демонстрации я обнаружил, что значение, равное примерно половине радиуса размытия, работает хорошо, но вам может потребоваться настроить его в зависимости от размера и направления вашего элемента.
Полное определение ключевых кадров перемещает элемент слева направо для первых 50% анимации, а затем справа налево для второй половины. Таким образом, максимальные параметры text-shadowbox-shadow
@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);
}
}
Несколько 2D-преобразований были добавлены для усиления эффекта анимации. Коробка это:
- сжимается в начале, так что похоже, что он собирается наброситься
- удлинены и наклонены в средней точке анимации, чтобы создать впечатление ускорения, и
- вернулся к своим нормальным размерам в конце.
Вы также должны заметить, что я использовал довольно медленную анимацию, чтобы вы могли видеть, что происходит.
Посмотреть демонстрацию размытия в CSS3 …
Эффект работает во всех последних браузерах:
- IE10
- Fire Fox
- Chrome, Safari и Opera 15 — хотя вам потребуются префиксы -webkit для всех свойств
animationtransform
В Opera 12 произошел сбой, но, хм, мы это замаскируем …
Единственное немного странное поведение возникает в IE10. Браузер не будет отображать тени, если значения по умолчанию не определены явно в начале и в конце, т.е.
text-shadow: 0 0 0 rgba(255,255,255,0);
box-shadow: 0 0 0 rgba(200,0,0,0);
Другими словами, IE10 не будет анимировать из box-shadow: nonebox-shadow: something Я подозреваю, что это влияет на другие свойства CSS, так что стоит добавить в ваш ящик странные проблемы с браузером.
Пожалуйста, пришлите мне ваши URL, если вы используете технику в другом месте!