Transition generator css: CSS Transition Generator | MakingCSS

Preview Box Color – цвет фона

• Gradient Top Color – верхний градиент
• Gradient Bottom Color – нижний градиент
• Font Color – цвет надписи кнопки
• Border Color – цвет границы
• Box Shadow Color – цвет тени
• Text Shadow Color – цвет тени надписи

И еще настройки под кнопкой, если поставите галочку:

• transparent – это значит, что фон кнопки наследуется от родительского элемента
• no gradient – без градиента
• Reset – сбросить настройки, сделать по умолчанию

4. Когда кнопка готова, нажмите на нее, тогда в правой части вместо настроек появляется код, он состоит из:

• HTML кода – скопируйте его в место нахождения кнопки
• CSS кода – добавьте в css файл стилей вашего сайта

4. Смотрим результат работы:

Я немного изменила для себя, добавила плавное исчезновение тени:

transition: all .4s;

и удалила свойство :active, чтобы кнопка не смещалась, мне это не нравится.

Есть еще вот такой генератор кнопок для сайта https://css3gen.com/button-generator/ — он без готовых кнопок, но настройки те же самые, просто поэтапно их задаете и получите тот же результат. Выбирайте, что удобнее.

В поиске по он-лайн генератору кнопок довольно много запросов, значит, подобные сервисы действительно пользуются спросом. Буду рада, если описание было вам полезным 🙂

Поделиться этой статьёй:

| Создание CSS

Описание перехода

Свойство transition позволяет плавно изменять значения свойств CSS элемента html, плавно переходя от одного значения к другому, в течение определенного периода времени. Это свойство часто используется в состоянии : hover .

Предположим, у вас есть кнопка, обозначенная как MyButton и определенная, как показано ниже, для которой вы хотите, чтобы цвет фона изменялся при наведении курсора мыши:

  Button ; 

Синтаксис перехода выглядит следующим образом:

 #MyButton {width: 100px; цвет фона: # 337ab7; цвет белый;  переход: все 0.3s easy } 

Первый параметр определяет, какое свойство CSS3 будет затронуто переходом. все означает, что переход выполняется для любого свойства CSS.
В нашем случае мы могли бы заменить все на background-color .

Второй параметр определяет продолжительность перехода в секундах (с) или миллисекундах (мс). В нашем примере продолжительность составляет 0,3 секунды.

Третий параметр (необязательный) — это кривая скорости перехода.Ниже приведены некоторые функции, которые можно использовать:

• easy: задает эффект перехода с медленным запуском, затем быстрым, затем медленным. Это значение по умолчанию.
• линейный: задает эффект перехода с одинаковой скоростью от начала до конца.
• easy-in: задает эффект перехода с медленным стартом.
• easy-out: задает эффект перехода с медленным концом.
• easy-in-out: задает эффект перехода с медленным началом и медленным концом.

Наконец, мы также можем добавить задержку (необязательно), чтобы сместить переход в соответствии с продолжительностью.

Теперь, когда переход установлен, мы можем использовать : hover , чтобы изменить цвет при наведении курсора мыши:

 #MyButton: hover {background-color: # 1e4668;
} 

Можно комбинировать несколько переходов с разными свойствами, чтобы варьировать их с разной длительностью или задержками. Ниже приведен пример:

 
 
 #MyDiv {width: 100px; высота: 100 пикселей; цвет фона: # 337ab7;  переход: цвет фона 0.Легкость 3s, высота 2s легкость, ширина 2s легкость; 
}
#MyDiv: hover {цвет фона: # e86200; высота: 150 пикселей; ширина: 150 пикселей;
} 
 Не следует забывать систематически добавлять следующие префиксы браузеров, чтобы оставаться совместимыми с максимально возможным количеством браузеров:
 #MyDiv {-webkit-transition: all 0.3s easy; -moz-transition: легкость всего 0.3s; -о-переход: легкость всего 0,3 с; переход всего 0,3с легкость;
} 
 Учитывая, что эти 4 строки должны быть включены, использование генератора CSS, такого как MakingCSS, экономит время и позволяет избежать ошибок.
 Совместимость с браузером:
  transition 
  
 26.0 
 4.0 -webkit-
  
 10.0
  
 16.0 
 4.0 -moz-
  
 6.1 
 3.1 -webkit4 12979 
 3.1 -webkit4-
 
 10.5 -o-
 CSS Transition Generator - CSS3gen.com 
 Этот инструмент объясняет 4 свойства перехода и просматривает фактические инициируемые события.
 О переходе CSS 
 В наши дни динамический характер веб-страниц не ограничивается обработкой данных, но может распространяться на внешний вид с помощью CSS.Стиль больше не должен быть статичным. С переходом  CSS  стиль может изменяться в течение определенного периода времени, когда запускается определенными событиями.
 Переход
 CSS не ограничивается выделением пунктов меню или изменением форматирования текста. Природа  CSS-переходов , по сути, переносит анимацию на веб-страницу через CSS, хотя и ограничивается элементами CSS, но без использования Flash.
 Эффекты перехода CSS 
 Изменение стиля называется эффектом перехода.Это может быть отдельный элемент, который изменяется с предопределенным эффектом перехода, или стилем даже нескольких элементов можно манипулировать одновременно или последовательно.
 Важно помнить, что для того, чтобы эффект перехода имел место, необходимо указать два аспекта. Первое - это свойство элемента, к которому применяется эффект перехода, а второе - продолжительность, в течение которой будет иметь место эффект перехода. Без этих двух свойств переход не произойдет.
 Свойства перехода CSS 
 Помимо необходимых свойств перехода и длительности перехода, есть еще два свойства перехода, которые можно изменить для определенного эффекта. Это задержка перехода и функция времени перехода.
 ransition-property - свойство элемента, которое будет изменено в результате.
 Продолжительность перехода - это период времени, в течение которого будет иметь место эффект.
 Transition-delay - это период времени, который должен пройти до начала эффекта.
 Временная функция перехода - это кривая скорости эффекта, которая позволяет вычислять промежуточные значения.
 Примеры кода перехода CSS 
 Давайте начнем с одного свойства, чтобы понять эффект перехода  CSS . Сначала давайте начнем со стандартного CSS, чтобы определить синий квадрат шириной и высотой 100 пикселей.
 div {ширина: 100 пикселей; высота: 100 пикселей; фон: синий; }
 Теперь давайте создадим эффект перехода, когда квадрат растягивается по горизонтали.Мы увеличим ширину до 300 пикселей за 2 секунды.
 div {ширина: 100 пикселей; высота: 100 пикселей; фон: синий; / * Запуск эффекта перехода * / transition-property: width; продолжительность перехода: 2 с; }
 Однако мы также должны объявить триггер события. В этом случае эффект перехода начнется при наведении курсора мыши на квадрат.
 div {ширина: 100 пикселей; высота: 100 пикселей; фон: синий; / * Запуск эффекта перехода * / transition-property: width; продолжительность перехода: 2 с; }
div: hover {ширина: 300 пикселей; }
 Мы можем ввести функцию времени перехода и задержку перехода следующим образом:
 div {ширина: 100 пикселей; высота: 100 пикселей; фон: синий; / * Запуск эффекта перехода * / transition-property: width; продолжительность перехода: 2 с; временная функция перехода: линейная; задержка перехода: 1 с; }
div: hover {ширина: 300 пикселей; }
 Таким образом, синий квадрат высотой и шириной 100 пикселей теперь будет растягиваться по горизонтали (ширина увеличивается) до 300 пикселей при наведении на него указателя мыши.Для завершения этого эффекта потребуется 2 секунды, но он начнется только после задержки в 1 секунду в начале, и движение будет линейным. Значение функции времени перехода может быть линейным (как в приведенном выше коде), легкостью или шагом.
 Важно отметить, что эффекты перехода  CSS  не работают в Internet Explorer 9 и более ранних версиях. Для браузера Safari свойство должно быть добавлено с префиксом –webkit-, поэтому свойство-перехода будет -webkit-transition-property.
 Приведенный выше код также можно сократить, чтобы объявить все различные свойства в одной строке следующим образом:
 переход: [свойство] [продолжительность] [временная функция] [задержка];
 Что касается нашего примера выше, код будет:
 переход: ширина 2с, линейная 1с;
 Кроме того, можно одновременно управлять несколькими свойствами элемента. Предположим, что ширина и высота увеличатся с начального размера 100 пикселей до 300 пикселей (код, как в предыдущем примере).Это произойдет линейно в течение 2 секунд после задержки в 1 секунду.
 Это можно сделать, используя запятую (,) для разделения эффекта перехода каждого свойства следующим образом:
 переход: ширина 2с, высота 2с, линейная 1с; 
 Поддерживающие браузеры 
 На момент написания следующие браузеры поддерживают свойство CSS3  transition :
 Браузер
 Поддерживает тень текста?
 Firefox 4+ (-moz-)
 Полная поддержка
 Firefox 1-3
 №
 Safari 3.1+ (-webkit-)
 Полная поддержка
 Safari 3.1+
 Частичная поддержка
 Chrome 4+ (-webkit-)
 Полная поддержка
 Хром 1
 №
 IE 10+ -ms-
 Полная поддержка
 Opera 10.5+
 Полная поддержка
 Animista - Анимация CSS по запросу 
 Политика конфиденциальности 
  Дата вступления в силу: 26 декабря 2019 г. 
 Animista собирает некоторые Персональные данные от своих пользователей.
 TL; Версия DR 
 Analytics 
  Google Analytics  
 Персональные данные: файлы cookie; Данные об использовании
 Реклама 
  BuySellAds  
 Собранные персональные данные: файлы cookie и данные об использовании.
 Управление контактами и отправка сообщений 
  Mailchimp  
 Персональные данные: адрес электронной почты
 ПОЛНАЯ ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ 
 Animista («мы», «мы» или «наш») управляет веб-сайтом animista.net (далее именуемым как «Сервис»).
 Эта страница информирует вас о нашей политике в отношении сбора, использования и раскрытия личных данных, когда вы используете нашу Службу, и о вариантах выбора, которые вы связали с этими данными.
 Мы используем ваши данные для предоставления и улучшения Сервиса. Используя Сервис, вы соглашаетесь на сбор и использование информации в соответствии с этой политикой.
 Определения 
 Сервис 
 Сервис - это веб-сайт / приложение animista.net.
 Персональные данные 
 Персональные данные означают данные о живом человеке, которого можно идентифицировать по этим данным (или по той и другой информации, которая находится в нашем распоряжении или может стать нашей).
 Данные об использовании 
 Данные об использовании - это данные, автоматически собранные либо в результате использования Сервиса, либо из самой инфраструктуры Сервиса (например, продолжительность посещения страницы).
 Файлы cookie 
 Файлы cookie - это небольшие файлы, которые хранятся на вашем устройстве (компьютере или мобильном устройстве).
 Сбор и использование информации 
 Мы собираем несколько различных типов информации для различных целей, чтобы предоставить вам и улучшить наш Сервис:
 Личные данные 
 При использовании нашего Сервиса мы можем попросить вас предоставить нам определенную личную информацию которые могут быть использованы для связи или идентификации вас («Персональные данные»).Лично идентифицирующая информация может включать, но не ограничивается:
 Адрес электронной почты
 Файлы cookie
 Данные об использовании
 Данные об использовании 
 Мы также можем собирать информацию о том, как осуществляется доступ к Сервису и как используется («Данные об использовании»). Эти данные об использовании могут включать такую ​​информацию, как адрес интернет-протокола вашего компьютера (например, IP-адрес), тип браузера, версия браузера, страницы нашего Сервиса, которые вы посещаете, время и дата вашего посещения, время, проведенное на этих страницах, уникальные идентификаторы устройств и другие диагностические данные.
 Отслеживание и данные файлов cookie 
 Мы используем файлы cookie и аналогичные технологии отслеживания для отслеживания активности в нашем Сервисе, и мы храним определенную информацию.
 Файлы cookie - это файлы с небольшим объемом данных, которые могут включать анонимный уникальный идентификатор. Файлы cookie отправляются в ваш браузер с веб-сайта и хранятся на вашем устройстве. Также используются другие технологии отслеживания, такие как маяки, теги и скрипты, для сбора и отслеживания информации, а также для улучшения и анализа нашего Сервиса.
 Вы можете указать своему браузеру отказаться от всех файлов cookie или указать, когда они отправляются. Однако, если вы не принимаете файлы cookie, вы не сможете использовать некоторые части нашего Сервиса.
 Использование данных 
 Animista использует собранные данные для различных целей:
 Для предоставления и обслуживания Сервиса
 Для уведомления вас об изменениях в нашей Сервисе
 Чтобы вы могли участвовать в интерактивных функциях нашего Сервиса, когда вы выберите это
 Для обеспечения обслуживания клиентов и поддержки
 Для предоставления анализа или ценной информации, чтобы мы могли улучшить Сервис
 Для мониторинга использования Сервиса
 Для обнаружения, предотвращения и решения технических проблем
 Передача Of Data 
 Ваша информация, включая Персональные данные, может передаваться и храниться на компьютерах, расположенных за пределами вашего штата, провинции, страны или другой государственной юрисдикции, где законы о защите данных могут отличаться от законов вашей юрисдикции.
 Ваше согласие с настоящей Политикой конфиденциальности, за которым следует предоставление такой информации, означает ваше согласие на такую ​​передачу.
 Animista предпримет все разумно необходимые шаги для обеспечения безопасного обращения с вашими данными в соответствии с настоящей Политикой конфиденциальности, и передача ваших Персональных данных в организацию или страну не будет происходить, если не будет обеспечен надлежащий контроль, включая безопасность. ваших данных и другой личной информации.
 Раскрытие данных 
 Animista может раскрывать ваши Персональные данные, если добросовестно полагает, что такие действия необходимы для:
 Для выполнения юридического обязательства
 Для защиты прав или собственности Animista
 Для предотвращения или расследовать возможные правонарушения в связи с Сервисом
 Для защиты личной безопасности пользователей Сервиса или общественности
 Для защиты от юридической ответственности
 Как гражданин Европы, согласно GDPR, вы обладаете определенными индивидуальными правами.Вы можете узнать больше об этих руководствах в Руководстве по GDPR.
 Безопасность данных 
 Безопасность ваших данных важна для нас, но помните, что ни один метод передачи через Интернет или метод электронного хранения не является на 100% безопасным. Хотя мы стремимся использовать коммерчески приемлемые средства для защиты ваших Персональных данных, мы не можем гарантировать их абсолютную безопасность.
 Поставщики услуг 
 Мы можем нанимать сторонние компании и частных лиц для содействия нашему Сервису («Поставщики услуг»), для предоставления Сервиса от нашего имени, для оказания услуг, связанных с Сервисом, или для помощи нам в анализе того, как используется наш Сервис. .
 Эти третьи стороны имеют доступ к вашим Персональным данным только для выполнения этих задач от нашего имени и обязаны не раскрывать и не использовать их для каких-либо других целей.
 Аналитика 
 Мы можем использовать сторонних поставщиков услуг для мониторинга и анализа использования нашего Сервиса.
  Google Analytics (Google LLC) 
 Google Analytics - это служба веб-анализа, предоставляемая Google LLC («Google»). Google использует собранные данные для отслеживания и изучения использования Animista, для подготовки отчетов о своей деятельности и передачи их другим службам Google.
 Google может использовать собранные данные для контекстуализации и персонализации рекламы в своей собственной рекламной сети.
 Собранные персональные данные: файлы cookie; Данные об использовании.
 Место обработки: США - Политика конфиденциальности - Отказ. Участник программы Privacy Shield.
 Реклама 
 Этот тип услуг позволяет использовать данные пользователя в рекламных целях, отображаемых в виде баннеров и другой рекламы на этом веб-сайте, возможно, исходя из интересов пользователя.
 Это не означает, что все Персональные данные используются для этой цели. Информация и условия использования приведены ниже. Некоторые из перечисленных ниже сервисов могут использовать файлы cookie для идентификации пользователей или они могут использовать метод поведенческого ретаргетинга, то есть отображать рекламу, адаптированную к интересам и поведению пользователя, в том числе те, которые были обнаружены за пределами этого веб-сайта. Для получения дополнительной информации ознакомьтесь с политиками конфиденциальности соответствующих служб.
 В дополнение к любому отказу, предлагаемому любой из перечисленных ниже служб, Пользователь может отказаться от использования файлов cookie сторонней службой, посетив страницу отказа от Network Advertising Initiative.
  BuySellAds (BuySellAds.com Inc.) 
 BuySellAds - это рекламная услуга, предоставляемая BuySellAds.com Inc.
 Собранные персональные данные: файлы cookie и данные об использовании.
 Место обработки: США - Политика конфиденциальности.
 Управление контактами и отправка сообщений 
 Этот тип услуги позволяет управлять базой данных контактов электронной почты, телефонных контактов или любой другой контактной информации для связи с пользователем.
 Эти службы могут также собирать данные о дате и времени, когда сообщение было просмотрено пользователем, а также когда пользователь взаимодействовал с ним, например, нажимая на ссылки, включенные в сообщение.
  Mailchimp (The Rocket Science Group LLC) 
 Mailchimp - это служба управления адресами электронной почты и отправки сообщений, предоставляемая The Rocket Science Group LLC.
 Собираемые персональные данные: адрес электронной почты.
 Место обработки: США - Политика конфиденциальности. Участник программы Privacy Shield.
 Ссылки на другие сайты 
 Наша служба может содержать ссылки на другие сайты, которыми мы не управляем. Если вы нажмете стороннюю ссылку, вы будете перенаправлены на сайт этой третьей стороны.Мы настоятельно рекомендуем вам ознакомиться с Политикой конфиденциальности каждого сайта, который вы посещаете.
 Мы не контролируем и не несем ответственности за содержание, политику конфиденциальности или действия любых сторонних сайтов или служб.
 Конфиденциальность детей 
 Наша Служба не предназначена для лиц младше 18 лет («Дети»).
 Мы сознательно не собираем личную информацию от лиц младше 18 лет. Если вы являетесь родителем или опекуном и знаете, что ваш ребенок предоставил нам личные данные, свяжитесь с нами.Если нам станет известно, что мы собрали Персональные данные от детей без подтверждения согласия родителей, мы предпримем шаги для удаления этой информации с наших серверов.
 Изменения в настоящей Политике конфиденциальности 
 Мы можем время от времени обновлять нашу Политику конфиденциальности. Мы уведомим вас о любых изменениях, разместив новую Политику конфиденциальности на этой странице.
 Рекомендуется периодически просматривать эту Политику конфиденциальности на предмет изменений. Изменения в этой Политике конфиденциальности вступают в силу, когда они публикуются на этой странице.
 Свяжитесь с нами 
 Если у вас есть какие-либо вопросы по поводу этой Политики конфиденциальности, свяжитесь с нами по электронной почте: [email protected]
 transition-delay - CSS: Cascading Style Sheets 
 The   transition-delay   CSS property указывает продолжительность ожидания перед запуском эффекта перехода свойства при изменении его значения.
 Задержка может быть нулевой, положительной или отрицательной:
 Значение  0 с  (или  0 мс ) немедленно запустит эффект перехода.
 Положительное значение задержит начало эффекта перехода на заданный промежуток времени.
 Отрицательное значение приведет к немедленному запуску эффекта перехода и в середине эффекта. Другими словами, эффект будет анимирован так, как если бы он уже был запущен в течение заданного промежутка времени.
 Вы можете указать несколько задержек, что полезно при переходе нескольких свойств. Каждая задержка будет применяться к соответствующему свойству, как указано в свойстве  transition-property , которое действует как главный список.Если указано меньше задержек, чем в главном списке, список значений задержки будет повторяться, пока их не будет достаточно. Если задержек больше, список значений задержки будет усечен, чтобы соответствовать количеству свойств. В обоих случаях объявление CSS остается в силе.
 
задержка перехода: 3 с;
задержка перехода: 2 с, 4 мс;


задержка перехода: наследование;
задержка перехода: начальная;
задержка перехода: вернуться;
задержка перехода: не задано;
  
 Значения 
  <время> 
 Обозначает время ожидания между изменением значения свойства и началом эффекта перехода.
 Пример, показывающий различные задержки 
 HTML 
  
 0,5 секунды 

  
 2 секунды 

  
 4 секунды 

   Изменить 
  
 CSS 
  .box {
  маржа: 20 пикселей;
  отступ: 10 пикселей;
  дисплей: встроенный блок;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  цвет фона: красный;
  размер шрифта: 18 пикселей;
  свойство-перехода: цвет фона размер шрифта преобразовать цвет;
  временная функция перехода: легкость входа-выхода;
  продолжительность перехода: 3 с;
}

.transformed-state {
  преобразовать: повернуть (270 градусов);
  цвет фона: синий;
  цвет: желтый;
  размер шрифта: 12 пикселей;
  свойство-перехода: цвет фона размер шрифта преобразовать цвет;
  временная функция перехода: легкость входа-выхода;
  продолжительность перехода: 3 с;
}

.delay-1 {
  задержка перехода: 0,5 с;
}

.delay-2 {
  задержка перехода: 2 с;
}

.delay-3 {
  задержка перехода: 4 с;
}
  
 JavaScript 
  function change () {
  const elements = document.querySelectorAll ("div.box");
  for (let element of elements) {
    элемент.classList.toggle ("преобразованное состояние");
  }
}

const changeButton = document.querySelector ("# изменение");
changeButton.addEventListener («щелкнуть», изменить);
  
 Результат 
 Таблицы BCD загружаются только в браузере
 Псевдоэлементы - CSS: Каскадные таблицы стилей 
 Псевдоэлемент CSS   - это ключевое слово, добавляемое в селектор, который позволяет вам стилизовать определенную часть выбранного элемента ( с). Например,  :: first-line  можно использовать для изменения шрифта первой строки абзаца.
 
p :: first-line {
  цвет синий;
  текст-преобразование: прописные буквы;
}
  
  Примечание:  В отличие от псевдоэлементов, псевдоклассы   могут использоваться для стилизации элемента на основе его состояния  .
  selector :: псевдоэлемент {
  стоимость имущества;
}
  
 В селекторе можно использовать только один псевдоэлемент. Он должен стоять после простых селекторов в операторе.
  Примечание:  Как правило, следует использовать двойные двоеточия ( :: ) вместо одинарного двоеточия (: ).Это отличает псевдоклассы от псевдоэлементов. Однако, поскольку это различие не присутствовало в более старых версиях спецификации W3C, большинство браузеров поддерживают оба синтаксиса для исходных псевдоэлементов.
 Псевдоэлементы, определенные набором спецификаций CSS, включают следующее:
 А
 Б
 С
 Ф
 г
 кв.м
-П
 S
 т
 Спецификация
 Статус
 Комментарий
 Уровень CSS 1
 Рекомендация
 Определенные псевдоклассы и псевдоэлементы.
 Браузер
 Самая низкая версия
 Поддержка
 Internet Explorer
 8,0
 : псевдоэлемент 
 9,0
 : псевдоэлемент :: псевдоэлемент 
 Firefox (Gecko)
 1,0 (1,0)
 : псевдоэлемент 
 1.0 (1,5)
 : псевдоэлемент :: псевдоэлемент 
 Opera
 4,0
 : псевдоэлемент 
 7,0
 : псевдоэлемент :: псевдоэлемент 
 Safari (WebKit)
 1,0 (85)
 : псевдоэлемент :: псевдоэлемент 
 Использование переходов CSS - CSS: каскадные таблицы стилей 
  Переходы CSS  позволяют управлять скоростью анимации при изменении свойств CSS.Вместо того, чтобы изменения свойств вступали в силу немедленно, вы можете вызвать изменения свойства в течение определенного периода времени. Например, если вы измените цвет элемента с белого на черный, обычно это изменение происходит мгновенно. При включенных переходах CSS изменения происходят через временные интервалы, которые следуют кривой ускорения, и все они могут быть настроены.
 Анимации, которые включают переход между двумя состояниями, часто называют  неявными переходами , поскольку состояния между начальным и конечным состояниями неявно определяются браузером.
 CSS-переходы
 позволяют вам решать, какие свойства анимировать (по  перечисляя их явно ), ​​когда начнется анимация (установив задержку ), , как долго будет длиться переход (установив продолжительность  ) и как переход будет выполнен (путем определения функции синхронизации  , например, линейно или быстро в начале, медленно в конце).
 Веб-автор может определить, какое свойство должно быть анимировано и каким образом.Это позволяет создавать сложные переходы. Поскольку не имеет смысла анимировать некоторые свойства, список анимируемых свойств ограничен конечным набором.
  Примечание:  Набор свойств, которые можно анимировать, меняется по мере развития спецификации.
  Примечание:  Значение  auto  часто бывает очень сложным. Спецификация рекомендует не анимировать от и до  auto . Некоторые пользовательские агенты, например, на основе Gecko, реализуют это требование, а другие, например, на основе WebKit, менее строги.Использование анимации с  auto  может привести к непредсказуемым результатам, в зависимости от браузера и его версии, и этого следует избегать.
 CSS-переходы
 управляются с помощью сокращенного свойства  transition . Это лучший способ настроить переходы, так как он позволяет избежать рассинхронизации параметров, что может быть очень неприятным, если тратить много времени на отладку в CSS.
 Вы можете управлять отдельными компонентами перехода с помощью следующих под-свойств:
  переходная собственность 
 Задает имя или имена свойств CSS, к которым должны применяться переходы.Во время переходов анимируются только перечисленные здесь свойства; изменения всех остальных свойств происходят, как обычно, мгновенно.
  продолжительность перехода 
 Задает продолжительность, в течение которой должны происходить переходы. Вы можете указать одну продолжительность, которая применяется ко всем свойствам во время перехода, или несколько значений, чтобы позволить каждому свойству переходить в течение другого периода времени.
  функция времени перехода 
 Задает функцию для определения способа вычисления промежуточных значений свойств. Временные функции  определяют, как вычисляются промежуточные значения перехода. Большинство функций синхронизации можно указать, предоставив график соответствующей функции, определяемый четырьмя точками, определяющими кубическую кривую Безье. Вы также можете выбрать замедление из шпаргалки по функциям замедления.
  задержка перехода 
 Определяет время ожидания между изменением свойства и фактическим началом перехода.
 Сокращенный синтаксис CSS записывается следующим образом:
  div {
    переход: <свойство> <продолжительность> <функция-синхронизация> <задержка>;
}
  
 Простой пример 
 В этом примере выполняется четырехсекундный переход размера шрифта с двухсекундной задержкой между моментом, когда пользователь наводит курсор мыши на элемент и началом эффекта анимации:
  #delay {
  размер шрифта: 14 пикселей;
  свойство перехода: размер шрифта;
  продолжительность перехода: 4 с;
  задержка перехода: 2 с;
}

#delay: hover {
  размер шрифта: 36 пикселей;
}
  
 Пример нескольких анимированных свойств 
  
    
 Поле ниже объединяет переходы для: ширины, высоты, цвета фона, преобразования.Наведите указатель мыши на поле, чтобы увидеть эти свойства в анимации. 
    
 Образец 
 
  
 Содержимое CSS 
  .box {
    стиль границы: сплошной;
    ширина границы: 1px;
    дисплей: блок;
    ширина: 100 пикселей;
    высота: 100 пикселей;
    цвет фона: # 0000FF;
    переход: ширина 2с, высота 2с, цвет фона 2с, преобразование 2с;
}

.box: hover {
    цвет фона: #FFCCCC;
    ширина: 200 пикселей;
    высота: 200 пикселей;
    преобразовать: повернуть (180 градусов);
}
  
 Если списки значений свойств имеют разную длину 
 Если список значений какого-либо свойства короче других, его значения повторяются, чтобы они совпадали.Например:
  div {
  свойство перехода: непрозрачность, слева, сверху, высота;
  продолжительность перехода: 3 с, 5 с;
}
  
 Это рассматривается как если бы это было:
  div {
  свойство перехода: непрозрачность, слева, сверху, высота;
  продолжительность перехода: 3 с, 5 с, 3 с, 5 с;
}
  
 Точно так же, если список значений какого-либо свойства длиннее, чем у  transition-property , он усекается, поэтому, если у вас есть следующий CSS:
  div {
  свойство-переход: непрозрачность, слева;
  продолжительность перехода: 3 с, 5 с, 2 с, 1 с;
}
  
 Это интерпретируется как:
  div {
  свойство-переход: непрозрачность, слева;
  продолжительность перехода: 3 с, 5 с;
}
  
 Обычно CSS используется для выделения элементов меню, когда пользователь наводит на них курсор мыши.Легко использовать переходы, чтобы сделать эффект еще более привлекательным.
 Прежде чем мы рассмотрим фрагменты кода, вы можете взглянуть на живую демонстрацию (при условии, что ваш браузер поддерживает переходы).
 Сначала мы настраиваем меню, используя HTML:
  
  
 Затем мы создаем CSS, чтобы реализовать внешний вид нашего меню.Соответствующие части показаны здесь:
  a {
  цвет: #fff;
  цвет фона: # 333;
  переход: ослабление всех единиц;
}

а: парение,
фокус {
  цвет: # 333;
  цвет фона: #fff;
}
  
 Этот CSS устанавливает внешний вид меню с изменением цвета фона и текста, когда элемент находится в состояниях : hover  и : focus .
  Примечание:  Следует соблюдать осторожность при использовании перехода сразу после:
 добавление элемента в DOM с помощью .appendChild () 
 удаление элемента  display: нет;  недвижимость.
 Это обрабатывается так, как если бы начального состояния никогда не было, и элемент всегда находился в своем конечном состоянии. Простой способ преодолеть это ограничение - применить  window.setTimeout ()  за несколько миллисекунд перед изменением свойства CSS, к которому вы собираетесь перейти.
 Использование переходов для сглаживания функциональности JavaScript 
 Переходы - отличный инструмент, позволяющий сделать внешний вид намного более плавным, при этом вам не нужно ничего делать с функциональностью JavaScript.Возьмем следующий пример.
  
 Щелкните в любом месте, чтобы переместить мяч 
 
  
 Используя JavaScript, вы можете создать эффект перемещения мяча в определенную позицию:
  var f = document.getElementById ('foo');
document.addEventListener ('щелчок', function (ev) {
    f.style.transform = 'translateY (' + (ev.clientY-25) + 'px)';
    f.style.transform + = 'translateX (' + (ev.clientX-25) + 'px)';
},ложный);
  
 С CSS вы можете сделать его гладким без дополнительных усилий.Добавьте переход к элементу, и любое изменение будет происходить плавно:
  .ball {
  радиус границы: 25 пикселей;
  ширина: 50 пикселей;
  высота: 50 пикселей;
  фон: # c00;
  позиция: абсолютная;
  верх: 0;
  слева: 0;
  переход: преобразовать 1 с;
}
  
 Обнаружение начала и завершения перехода 
 Вы можете использовать событие  transitionend , чтобы определить, что анимация завершилась. Это объект  TransitionEvent , который имеет два дополнительных свойства помимо типичного объекта  Event :
  propertyName 
 Строка, указывающая имя свойства CSS, переход которого завершен.
  прошедшее время 
 Число с плавающей запятой, указывающее количество секунд, в течение которых переход выполнялся на момент возникновения события. На это значение не влияет значение  transition-delay .
 Как обычно, вы можете использовать метод  addEventListener ()  для отслеживания этого события:
  el.addEventListener ("transitionend", updateTransition, true);
  
 Вы обнаруживаете начало перехода с помощью  transitionrun  (срабатывает до любой задержки) и  transitionstart  (срабатывает после любой задержки) таким же образом:
  эл.addEventListener ("transitionrun", signalStart, true);
el.addEventListener ("transitionstart", signalStart, true);
  
  Примечание:  Событие  transitionend  не срабатывает, если переход прерывается до его завершения, потому что либо элемент сделан  display  : none , либо значение свойства анимации изменено.
 Спецификация
 Статус
 Комментарий
 Переходы CSS
 Осадка рабочий
 Первоначальное определение
 CSS-переходы | CSS-переходы, CSS-преобразования и CSS-анимация 
 Браузер Поддержка переходов CSS 
 Как использовать переходы 
 Если вы раньше не использовали переходы, вот краткое введение.
 В элементе, который нужно анимировать, добавьте следующий CSS:
#id_of_element {
  -webkit-transition: простота установки всех единиц;
  -moz-transition: легкость включения-выключения всех единиц;
  -o-transition: легкость включения-выключения всех единиц;
  переход: легкость входа-выхода всех единиц;
}
 
 Существует много дублирования из-за префиксов поставщиков - до тех пор, пока спецификация не будет завершена, это будет сохраняться. Если вас это беспокоит, существуют различные инструменты, такие как CSS Scaffold, LESS или мое предпочтение - SASS, которые позволяют вам определять миксины, чтобы избежать повторяющегося кода.
 Другой подход - просто написать CSS без префиксов, а затем использовать Lea Verou -prefix-free, чтобы добавить их во время выполнения.
 Чего вам определенно не следует делать, так это включать только префикс webkit. Хотя это кажется заманчивым, особенно при разработке для мобильных устройств, webkit - не единственный движок рендеринга!
 Также стоит отметить, что в этих свойствах нет префикса  -ms- . IE10 был первым браузером без префикса.Однако в бета-версиях IE10 префикс использовался, поэтому вы можете увидеть код с использованием  -ms- . Но в этом нет необходимости.
 Синтаксис довольно прост: вы указываете свойство, которое хотите анимировать, all или border-radius или цвет или что-то еще, время для запуска, а затем функцию времени перехода. Варианты функции синхронизации показаны ниже.
 Каждый раз, когда изменяется какое-либо свойство, оно будет анимироваться, а не изменяться напрямую. Это может быть связано с другим набором свойств, установленным для псевдокласса, например при наведении курсора, или новым классом или свойствами, установленными с помощью javascript.В приведенном ниже примере используется: наведите указатель мыши для изменения свойств - JavaScript не требуется.
 Чтобы увидеть разницу в скорости, взгляните на тест скорости.
 Различные функции синхронизации 
 В дополнение к встроенным функциям синхронизации вы также можете указать свои собственные. Отличный инструмент Ceaser CSS Easing Tool делает это очень просто.
 Стоит отметить, что построенные вами кривые могут иметь отрицательные значения. Кривая Безье для последнего поля выше составляет  кубических значений Безье (1.000, -0,530, 0,405, 1,425) , отрицательные значения вызывают «разбег», что выглядит довольно круто!
 Задержки 
 Синтаксис перехода CSS3 имеет вид:
переход: [ ||
                ||
               <переходная-синхронизирующая функция> ||
               ]
 
 Вы заметите, что последний параметр - это задержка - это позволяет вам запускать действия после того, как событие произошло.Ниже представлена ​​небольшая демонстрация этой функции.
 Задержки перехода 
 Это работает, просто добавляя задержку к каждому из разных кругов. Это так же просто, как добавить задержку перехода : 0,6 с;  к элементу.
 Расширенные задержки 
 Вы можете настроить способ анимации различных свойств по-разному. В этом примере нормальный (синий) круг имеет этот CSS (с соответствующими префиксами поставщиков):
# dd_main2 {
  переход: легкость входа-выхода всех единиц;
}
 
 В кружке "Пример 1" (зеленый) вместо этого CSS:
.
# dd_main2 {
  свойство-переход: вверху, слева;
  продолжительность перехода: 1 с, 1 с;
  задержка перехода: 0 с, 1 с;
}
 
 В то время как кружок «Пример 2» (красный) имеет вместо этого CSS:
# dd_main2 {
  свойство перехода: сверху, слева, радиус границы, цвет фона;
  продолжительность перехода: 2 с, 1 с, 0.5 с, 0,5 с;
  задержка перехода: 0 с, 0,5 с, 1 с, 1,5 с;
}
 
 Это позволяет нам анимировать свойства независимо друг от друга, а это означает, что этот простой метод можно использовать для создания очень сложных анимаций.
 Анимированные свойства 
 Что касается свойств, которые можно анимировать, лучше всего поэкспериментировать. W3C поддерживает список свойств, которые можно анимировать в спецификации переходов CSS. К ним относятся все, от цвета фона и межбуквенного интервала до text-shadow и min-height.Многие из этих свойств по умолчанию не поддерживаются анимацией jQuery, что делает переходы CSS гораздо более полезными из коробки. Кроме того, многие браузеры аппаратно ускоряют анимацию, не требующую перерисовки, а именно непрозрачность, 3D-преобразования и фильтры. Чтобы увидеть методы, которые ускоряет Webkit, взгляните на код AnimationBase.cpp из исходного кода Webkit. На момент написания здесь определены три класса:  PropertyWrapperAcceleratedOpacity ,  PropertyWrapperAcceleratedTransform  и  PropertyWrapperAcceleratedFilter .Это анимации, которые ускоряет Webkit. Другие браузеры работают по-другому, но поскольку Webkit популярен на мобильных устройствах, где эти вещи наиболее важны, стоит отметить этот особый случай.
 На самом деле браузеры позволяют анимировать больше свойств, чем указано -  box-shadow  приходит на ум в качестве очевидного примера. Приведенная ниже таблица взята из приведенной выше ссылки и может рассматриваться как минимальное количество свойств, которые, как вы ожидаете, можно будет анимировать.
 Название свойства
 Тип
  цвет фона 
 цвет
  фоновое изображение 
 только градиенты
  фоновая позиция 
 процент, длина
  цвет нижней границы 
 цвет
  ширина по краю снизу 
 длина
  цвет рамки 
 цвет
  левая рамка 
 цвет
  ширина рамки слева 
 длина
  цвет рамки справа 
 цвет
  ширина рамки справа 
 длина
  расстояние между границами 
 длина
  цвет верхней границы 
 цвет
  ширина границы по верху 
 длина
  ширина рамки 
 длина
  низ 
 длина, в процентах
  цвет 
 цвет
  урожай 
 прямоугольник
  размер шрифта 
 длина, в процентах
  font-weight 
 номер
  сетка- * 
 различное
  высота 
 длина, в процентах
  левый 
 длина, в процентах
  межбуквенный интервал 
 длина
  высота строки 
 число, длина, проценты
  нижнее поле 
 длина
  поле слева 
 длина
  поле справа 
 длина
  верхнее поле 
 длина
  макс. Высота 
 длина, в процентах
  макс. Ширина 
 длина, в процентах
  мин. Высота 
 длина, в процентах
  Мин. Ширина 
 длина, в процентах
  непрозрачность 
 номер
  цвет контура 
 цвет
  контур-офсет 
 целое число
  ширина контура 
 длина
  набивка нижняя 
 длина
  обивка левая 
 длина
  обивка правая 
 длина
  утеплитель 
 длина
  правый 
 длина, в процентах
  текстовый отступ 
 длина, в процентах
  тень текста 
 тень
  верх 
 длина, в процентах
  с выравниванием по вертикали 
 ключевое слово, длина, процент
  видимость 
 видимость
  ширина 
 длина, в процентах
  межсловный интервал 
 длина, в процентах
  z-индекс 
 целое число
  увеличение 
 номер
 В дополнение к этому, все браузеры с переходами поддерживают анимацию преобразований CSS, что оказывается бесценным.
No related posts.