Создание и редактирование эффектов перехода CSS3 в Dreamweaver

Последнее обновление 25 апр. 2024 г.

С помощью панели «Переходы CSS» можно создавать, изменять и удалять переходы CSS3.

Чтобы создать переход CSS3, создайте класс перехода, указав значения для свойств перехода элемента. Если выделить элемент, прежде чем создать класс перехода, класс перехода автоматически применяется к выделенному элементу.

Можно добавить созданный код CSS в текущий документ или указать внешний файл CSS.

Создание и применение эффекта перехода CSS3

Выделите элемент (абзац, заголовок, и т. д.), к которому нужно применить переход (необязательно). Или же можно создать переход и применить его к элементу позже.

Выберите Окно > Переходы CSS.

Щелкните .

Создайте класс перехода, использующий параметры в диалоговом окне Новый переход.

Целевое правило

Введите имя селектора. Селектор может быть любым селектором CSS, в частности тегом, правилом, идентификатором или селектором компоновки. К примеру, если требуется добавить эффекты перехода во все теги <hr>, введите hr

Переход по

Выберите состояние, к которому требуется применить переход. Например, если нужно применить переход при наведении на элемент мыши, используйте параметр hover.

Использовать один и тот же переход для всех свойств

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

Использовать разные переходы для разных свойств

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

Свойство

Щелкните , чтобы добавить свойство CSS в переход.

Длительность

Введите длительность эффекта перехода в секундах (с) или миллисекундах (мс).

Задержка

Время в секундах или миллисекундах перед началом эффекта перехода.

Функция расчета времени

Выберите стиль перехода из доступных вариантов.

Конечное значение

Конечное значение для эффекта перехода. Например, если вы хотите, чтобы кегль увеличился до 40 px в конце эффекта перехода, укажите для свойства размера шрифта значение 40 px.

Выберите место создания перехода

Чтобы встроить стиль в текущий документ, используйте параметр «Только в этом документе».

Если требуется создать внешнюю таблицу стилей для кода CSS3, выберите «Создать CSS-файл». После нажатия кнопки «Создать переход» программа спросит, куда сохранить новый файл CSS. Созданная таблица стилей добавляется в меню Выберите место создания перехода.

Редактирование эффектов перехода CSS3

На панели Переходы CSS выберите эффект перехода, который хотите редактировать.

Щелкните .

Используйте диалоговое окно «Редактирование перехода» для изменения ранее введенных значений параметров перехода.

Отключение стенографии CSS для переходов

См. раздел «Что такое свойство стенографии CSS?», чтобы получить информацию о стенографии CSS и ее преимуществах.

Выберите «Редактирование» > «Установки».

Выберите Стили CSS.

В окне «Использовать стенографию для» снимите флажок «Переход».