Теперь мы можем с легкостью украшать наши страницы прекрасными эффектами с динамическими трансформациями. Однако для создания настоящей анимации необходимо определять переходы между соседними шагами процесса.
Свойство transition было создано специально для упрощения этой нетривиальной задачи. Оно волшебным образом создает недостающие шаги, подразумевающиеся в нужном направлении движения. Добавляя всего одно это свойство, мы приказываем браузеру взять на себя заботу об анимации, создать вместо нас все эти невидимые шаги и сгенерировать плавный переход из одного состояния в другое.
#mainbox {
Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;
-moz-transition: — moz-transform 1s ease-in-out 0.5s; — webkit-transition: — webkit-transform 1s ease-in-out 0.5s;
}
#mainbox:hover{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
Как видно из листинга 3.26, свойство transition принимает до четырех параметров, разделенных пробелами. Первое значение представляет свойство, на базе которого будет создаваться переход. Его необходимо указывать, так как одновременно могут меняться несколько свойств, а нам, вероятно, нужно создать шаги только для одного из них. Второй параметр устанавливает время, за которое должен произойти переход из начального положения в конечное. Третьим параметром может выступать любое из пяти ключевых слов: ease, linear, ease-in, ease-out и ease-in-out. Эти ключевые слова определяют, на основе какой кривой Безье будет выполняться процесс перехода. Каждое ключевое слово представляет отдельную кривую Безье, и единственный способ узнать, какая из них лучше всего подходит именно для вашего перехода, — протестировать все варианты на экране. Последний параметр свойства transition — это задержка. Он определяет, какова будет пауза перед началом перехода. Для того чтобы переход охватывал все меняющиеся свойства данного объекта, необходимо указать ключевое слово all. Также можно явно объявить все участвующие свойства, просто перечислив их через запятую.
Замените кодом из листинга 3.26 соответствующий код в листинге 3.11 и проверьте результат в своем браузере.
В листинге 3.26 мы создали переход для изменений, определяемых свойством transform. Однако свойство transition поддерживает не все свойства CSS, а список поддерживаемых, вероятно, со временем будет меняться. Вам придется самостоятельно тестировать их или изучать веб-сайты производителей соответствующих браузеров для получения дополнительной информации о поддержке.
К слову, создание современного и продуманного до мелочей сайта, и тем более сайта компании – задача весьма сложная и трудоемкая для новичка…, не говоря уже о неизбежном этапе допущения ошибок на начальном этапе овладения навыками. В вопросе создания корпоративных сайтов будет правильнее прибегнуть к услугам профессиональной веб-студии Орион, которая опираясь на многолетний опыт работы и современные тренды быстро и качественно решит поставленные задачи!
Добавить комментарий