Анимация на веб-странице может привлечь больше пользователей. Спросите себя: если бы вы увидели веб-страницу с небольшим количеством анимации, разве вы не захотели бы изучить ее больше? Теперь, с переходами CSS, вы можете оживить свою работу с помощью отличной анимации. И, заметьте, это нужно делать правильно. Давайте исследуем мир CSS-переходов в следующем порядке:
- Почему переходы CSS?
- Свойство перехода
- Что нужно указать?
- Свойство функции функции времени перехода
- Свойство задержки перехода
Почему переходы CSS?
Возьмем пример. Если бы вы изменили цвет элемента с белого на синий, это изменение произошло бы почти мгновенно. Для получения более анимированного эффекта вы можете делать это изменение постепенно. Это тоже выглядит довольно привлекательно. Включив переходы CSS, вы можете настроить способ возникновения изменений. Вы можете определить, как изменения в элементах происходят в определенные промежутки времени, которые следуют кривой ускорения.
CSS-переходы позволяют определять изменения для элементы, конкретные временные интервалы, скорость, кривая ускорения и многое другое. Вы можете сделать все это без использования Flash или JavaScript .
Для лучшего понимания вы можете обратиться к изображению ниже:
На изображении выше HTML-элемент изменится с красного на синий за одну секунду. Вы также увидите промежуточный цвет, когда происходит переход. Если вы не собираетесь использовать переходы CSS, вы заметите, что изменение цвета с красного на синий происходит мгновенно - вы не увидите промежуточный цвет. С переходами CSS вы заметите анимированный эффект, когда элементы HTML меняют свое старое состояние на новое.
Свойство перехода
Вы можете использовать сокращенное свойство transition для управления переходами CSS. Использовать это сокращение не только просто, но и позволяет избежать рассинхронизации параметров, отладка которых в CSS может быть довольно неприятной.
Свойство перехода определяет свойства CSS, для которых требуется эффект перехода. Анимируются только эти свойства CSS.
Синтаксис:
переход:
Как новичок, вы можете столкнуться с некоторыми трудностями при использовании стенографии. Если вы считаете, что использование сокращений сейчас немного сложно для вас, вы можете указать свойства перехода отдельно. Для элемента HTML вы можете указать свойства перехода одно за другим, как показано в следующем примере:
div {width: 100px height: 100px background: lightblue свойство-перехода: width-duration-duration: 2s transition-timer-function: linear-transition-delay: 1s} div: hover {width: 300px}Наведите указатель мыши на коробку
В приведенном выше примере мы отдельно указали свойства (свойство перехода, длительность перехода, функция времени перехода и задержка перехода) и их значения. Мы скоро узнаем об этих свойствах перехода.
Что нужно указать?
Прежде всего, вам нужно указать две вещи для создания переходов CSS: свойство CSS, к которому нужно добавить эффект, и продолжительность этого эффекта.Помните об одном: если вы не укажете длительность, переход примет значение по умолчанию 0 , и никакого эффекта не будет.
Рассмотрим пример:
В приведенном ниже коде определяется эффект перехода свойства ширины в течение пяти секунд.
div {width: 100px height: 100px background: blue transition: width 5s} div: hover {width: 600px}Наведите курсор на элемент div выше, чтобы увидеть эффект перехода.
В приведенном выше коде вы увидите, что когда вы наводите курсор на синюю рамку, синяя рамка постепенно увеличивает свою ширину в течение пяти секунд. Вы также заметите, что когда вы убираете курсор с синего поля, синее поле постепенно (а не мгновенно) возвращается к своему исходному размеру. Вы также можете изменить значения ширины и продолжительности времени, чтобы увидеть, как это свойство перехода влияет на элемент HTML.
Вы также можете добавить эффект перехода к нескольким свойствам. Вы можете сделать это, используя запятые для разделения свойств. Рассмотрим пример:
В приведенном ниже коде свойство перехода указано для ширины, высоты и преобразования.
div {padding: 15px width: 150px height: 100px background: green transition: width 2s, height 2s, transform 2s} div: hover {width: 300px height: 200px transform: rotate (360deg)} Привет мир (Наведите на меня)
В приведенном выше примере вы увидите, как перемещается зеленая рамка, когда вы наводите на нее курсор.
Мы указали только свойство и срок действия. Давайте посмотрим на другие параметры на различных примерах.
Свойство функции функции времени перехода
Это свойство определяет кривую скорости для эффекта перехода. Может принимать следующие значения:
- Ценность легкости: Это значение по умолчанию, при котором эффект сначала медленный, затем быстрее и медленно заканчивается.
- Линейное значение: Этот эффект не изменяет скорость перехода - он поддерживает постоянную скорость от начала до конца.
- Простота в использовании: Этот эффект начинается медленно.
- Значение легкости: Этот эффект имеет медленное завершение.
- Ценность легкости входа: Этот эффект имеет как медленное начало, так и медленное завершение.
- Значение кубической кривой Безье (n, n, n, n): Вы можете указать свой собственный набор значений в функции кубического Безье.
В приведенном ниже коде показаны эффекты перехода для значений линейного, легкого, легкого, легкого и легкого выхода.
div {width: 100px height: 100px background: pink transition: width 2s} # div1 {transition-timer-function: linear} # div2 {transition-time-function: easy} # div3 {transition-time-function: easy-in } # div4 {функция-тайминга: легкость} # div5 {функция-тайминга: легкость выхода} div: hover {ширина: 300 пикселей}Наведите указатель мыши на элементы div ниже
линейный
легкость
легкость в
облегчение
легкость входа
Свойство задержки перехода
Иногда вы хотите, чтобы анимация появлялась по прошествии определенного времени. Свойство transition-delay позволяет указать задержку для эффекта перехода. Вы можете указать задержку в секундах.
Давайте рассмотрим пример, чтобы увидеть задержку эффекта перехода:
div {width: 100px height: 100px background: yellow transition: width 3s transition-delay: 1s} div: hover {width: 300px}Наведите указатель мыши на элемент div ниже
резюме разработчика Python начального уровня
Заметка: Вы можете заметить, что задержка в 1 секунду до начала эффекта
В приведенном выше коде, когда вы наводите курсор на желтое поле, вы заметите (на одну секунду), что эффекта нет. Подождав одну секунду, вы заметите эффект.
На этом мы подошли к концу статьи о переходах CSS. Теперь вы можете добавлять анимацию на свои веб-страницы. Попробуйте эти примеры.
Ознакомьтесь с нашими который включает в себя живое обучение под руководством инструктора и реальный проектный опыт. Это обучение позволит вам овладеть навыками работы с серверными и интерфейсными веб-технологиями. Он включает обучение веб-разработке, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
Есть вопрос к нам? Пожалуйста, укажите это в комментариях блога «CSS Transition», и мы свяжемся с вами.