Хотя люди ожидают некоторых изменений на экране, CSS и HTML мало что могут сделать для взаимодействия на странице, и их все равно необходимо реализовать в коде.
Например, ссылка бывает такого-то или такого-то цвета; текстовая область может быть такой-то или такой-то большой; изображение либо прозрачное, либо непрозрачное; они напрямую переходят из одного состояния в другое — перехода между ними нет .
Это приводит к тому, что большинство веб-страниц становятся несколько жесткими, поскольку элементы только переключаются или изменяются жестко.
Да, вы можете переусердствовать, используя DHTML, jQuery или написав собственный JS, но для реализации того, что должно быть очень простой функциональностью, потребуется больше кода.
Нам нужен быстрый и простой способ добавить на страницу простые эффекты перехода. В этой статье вы найдете полезную информацию о CSS-переходах и о том, как их использовать.
Несколько месяцев назад я предложил дизайнерам начать использовать новые технологии CSS 3 для достижения некоторой базовой функциональности, которой они так жаждали в течение долгого времени — единственная проблема заключалась в том, что ни одна из этих технологий не была доступна в IE, включая IE8.
Мнение о том, что некоторые читатели полагают, что эти технологии будут невидимы для 75% пользователей, ненадежно.
Этим читателям я хочу сказать: «Держитесь крепче», потому что я собираюсь познакомить вас с еще одним новым свойством CSS, которое позволяет вам добавлять интересные эффекты трансформации к любому элементу с помощью всего лишь нескольких строк кода.
Преобразования CSS были только что представлены в CSS 3, но были добавлены как расширение веб-кита. То есть теперь их можно использовать только в браузерах на базе webkit, включая Apple Safari и Google Chrome. Однако, судя по пре-альфа-версии Opera 10.5, Opera будет поддерживать преобразования CSS 3 в следующей версии 10.5. Поэтому , чтобы увидеть реальные эффекты, упомянутые в этой статье, настоятельно рекомендуется использовать Chrome или Safari 4 для просмотра этой статьи .
Откуда берутся CSS-преобразования?
Раньше преобразования были просто частью Webkit и основой для некоторых интересных вещей, которые пользовательский интерфейс Safari мог делать, а другие браузеры - нет.
Однако рабочая группа W3C CSS отказалась добавлять преобразования к своим официальным функциям, при этом некоторые члены настаивают на том, что преобразования не являются свойствами CSS и их лучше обрабатывать с помощью сценариев. (Я полон уверенности. Я высказал аналогичную точку зрения в предыдущем параграфе и обсуждал ее с Гао Гао. Я считаю, что CSS-анимация выходит за рамки производительности. Интерактивные вещи следует реализовывать с помощью скриптов. Но позже, под под руководством брата Гуя я начал с новым пониманием - Шэнь Фей)
Но многие дизайнеры и разработчики, в том числе и я, настаивают на том, что это действительно стили — просто динамические стили, а не традиционные статические стили, которые мы используем каждый день.
К счастью, дебаты о динамическом стиле остались в прошлом. В марте прошлого года представители Apple и Mozilla начали добавлять модули преобразования CSS к функциям CSS 3, что очень близко к тому, что Apple уже добавила в WebKit.
Краткое введение в улучшения дизайна
Прежде чем мы продолжим, позвольте мне подчеркнуть следующее: никогда не ставьте функциональность веб-сайта в зависимость от стиля, если стиль не является универсальным для браузера (то есть не поддерживается всеми широко используемыми браузерами).
Еще раз подчеркиваю для тех, кто это пропустил: никогда не позволяйте функциональности веб-сайта зависеть от стиля, если стиль не является универсальным для всех браузеров .
Это означает, что вы можете использовать стили, такие как переходы, в качестве улучшения дизайна для улучшения взаимодействия с пользователем, не жертвуя при этом удобством использования для пользователей, которые их не видят. Если это работает без преобразований CSS и пользователи по-прежнему могут выполнять свои задачи, тогда все в порядке, и вы можете использовать преобразования CSS.
В переводе: CSS-переходы 101
Китайский: начало работы с преобразованиями CSS3 Автор оригинала: Джейсон Крэнфорд Тиг
Переводчик: Shenfei, пожалуйста, соблюдайте авторские права и указывайте источник при перепечатке. Спасибо!