Страница урока - [ Ссылка ]

В уроке рассмотрено создание средствами каскадных таблиц стилей эффектов плавного и пошагового изменения прозрачности, высоты и ширины всплывающего меню. Для настройки эффектов применены CSS-свойства семейств transition и animation.

На примере горизонтального меню разобрано создание эффекта плавного изменения прозрачности (opacity) и высоты (height) всплывающего блока. Добавление необходимых стилей проводилось непосредственно в окне браузера Mozilla в приложении FireBug. Эффекты плавного изменения прозрачности и высоты создавались путем указания четырех CSS-свойств: transition-property (название изменяемого CSS-свойства), transition-duration (продолжительность анимации), transition-timing-function (математическая функция, описывающая изменение) и transition-delay (задержка анимации). Приведена сокращенная запись свойств семейства transition. Продемонстрирован графический способ построения кривых Безье, используемых для математического описания изменения CSS-свойства, и онлайн сервис Cubic-Bezier.com для тестирования анимационного эффекта.

На примере изменения ширины всплывающего окна рассмотрено добавление пошаговых анимаций с ключевым словом @keyframes и CSS-свойствами семейства animation: animation-name (произвольное имя анимации), animation-duration (продолжительность анимации), animation-timing-function (функция, описывающая анимацию), animation-iteration-count (число повторений анимации), animation-direction (направление анимации), animation-fill-mode (воздействие анимации на элемент до и после анимации) и animation-play-state (состояние анимации). Приведены примеры сокращенной записи CSS-свойств семейства animation и применения префиксов производителей -webkit-, -moz-, -ms- и -o- для поддержки CSS-анимаций максимальным количеством браузеров.

свернуть