Техники анимации CSS3, которые вам нужно знать

Перевод: Технология анимации CSS3, которую вам нужно знать

Перевод: Что нужно знать о поведенческом CSS

Пожалуйста, соблюдайте авторские права и указывайте ссылку на этот сайт при перепечатке!

Предисловие к переводу: Эта статья переведена с сайта Smashingmagazine, но содержание исходного текста немного поверхностное и не очень полное. Front-end Observation добавляет все больше и больше систематического контента на основе перевода. Если есть какие-то недостатки, пожалуйста, исправьте и дополните их.

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

Интернет — это прекрасная среда и сообщество, объединяющее множество знаний, которыми можно поделиться. Нам нужны были закругленные углы , и мы это сделали; нам нужно было несколько фоновых изображений , и мы добились этого; нам нужны были изображения границ , и мы это сделали; Поэтому спрос никогда не является проблемой, иначе мы могли бы по-прежнему использовать таблицы для макетирования страниц и использовать слишком много кода. Мы все знаем, что Интернет может все.

Рожденный для Интернета

Свойства CSS 3, такие как border-radius , box-shadow и text-shadow, начинают набирать обороты в продвинутых браузерах, таких как webkit (Safari, Chrome и т. д.) и Gecko (Firefox). Они (эти свойства CSS) уже создают более легкие страницы и более богатый опыт для пользователей, и постепенно деградируют. Однако это лишь некоторые из многих вещей, которые CSS 3 может для нас сделать.

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

CSS-трансформация

Преобразование CSS — это проект W3C. Но это не просветило меня, когда я впервые сел прочитать все его функции, чтобы узнать кое-что. Как вы можете себе представить, этот документ написан в техническом плане и больше фокусируется на деформированных графических (то есть сюжетных) элементах и ​​матрицах. Поскольку я не прикасался к матрицам с первого года обучения по математическому анализу, мне пришлось провести много старых добрых тестов браузера и предположений и проверок для этой главы.

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

трансформировать

Атрибут Transform реализует некоторые из тех же функций, которые могут быть реализованы с помощью SVG. Его можно использовать для строчных и блочных элементов. Он позволяет нам вращать, масштабировать и перемещать элементы — всего лишь с помощью одной строки кода CSS.

Самая большая критика некоторых авангардных дизайнов заключается в том, что текст нельзя выделить (это должно быть достигнуто путем вырезания изображений). Когда вы научитесь использовать атрибут преобразования для управления текстом, это перестанет быть проблемой, поскольку это чистый метод CSS, поэтому текст внутри элемента останется необязательным. Это огромное преимущество CSS перед использованием изображений (или фоновых изображений).

Некоторые забавные и полезные функции морфинга:

вращать

Поворот позволяет вращать объект, передавая значение в градусах.

шкала

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

переводить

Преобразование изменяет положение элементов на основе координат X и Y.

перекос

Как следует из названия, наклон — это наклон объекта, а параметр — это градус.

матрица

Transform поддерживает матричное преобразование, которое заключается в изменении положения элементов на основе координат X и Y.

Давайте более подробно рассмотрим каждую особенность.

Поворот

Атрибут преобразования имеет множество применений, одно из которых — перемещение (поворот). Функция Translate вращает объект в зависимости от угла и может использоваться для строчных и блочных элементов. С ее помощью можно добиться интересных эффектов .

Обратите внимание, что в IE8 (нестандартный режим) вместо «фильтра» требуется писать «-ms-filter».

Поддержка браузера

Поддержка перевода в браузерах на удивление широка. В приведенном выше фрагменте CSS мы просто добавляем префиксы -webkit- и -moz- и поворачиваем элемент #nav на -90 градусов.

Довольно просто, правда? Единственная проблема заключается в том, что если IE не поддерживает довольно важный элемент дизайна, многие дизайнеры не захотят его использовать.

К счастью, в IE есть фильтр для этого: фильтр поворота графики. Он может иметь 4 значения вращения: 0, 1, 2 и 3. Вы не получите такого же детального контроля, как Webkit и Gecko, но, по крайней мере, он будет в некоторой степени согласованным (даже с IE6). Хотя этот фильтр поддерживает только 4 значения, что кажется немного бесполезным, для IE это лучше, чем ничего.

шкала

Масштаб работает не так, как вы думаете: он просто сжимает и увеличивает элемент. Функция масштабирования принимает значения ширины и высоты, которые могут быть положительными, отрицательными или десятичными.

Положительные значения увеличивают элемент, как и следовало ожидать, в зависимости от заданной ширины и высоты.

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

Поддержка браузера

Атрибут масштаба в настоящее время поддерживается только Firefox, Safari и Chrome, и пока ни одна версия IE его не поддерживает. Масштабирование объекта — весьма осмысленный дизайнерский выбор. Его можно использовать с помощью прогрессивного улучшения: наведения, которое может добавить немного интереса к вашей навигации.