Страница 1 из 11
Общий форум » Все для вебмастера » Начинающий Вебмастер » Как использовать свойство перехода CSS3 (Подробный обзор свойств CSS3-переходов)
Как использовать свойство перехода CSS3
Kosten
Дата: Среда, 31.01.2018, 19:05 | Сообщение 1
Администраторы
Сообщений:16331
Награды: 53


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

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

Код
div{
   height: 100px;
   -webkit-transition: height 3s;
}
div:hover{
   height: 200px;
}

Очень важно, чтобы вы не забыли включить длительность перехода, или время продолжительности будет по умолчанию равным 0, а эффект перехода не произойдет. Также не забудьте использовать s (секунды) для количественного определения продолжительности.
Давайте посмотрим пример этого в действии. Для целей этого примера предположим, что мы хотим добавить эффект перехода к изменению высоты элемента div при наведении. Вот код, который нам нужен для достижения этого эффекта:

ак вы можете видеть, мы включили только значения свойств перехода и времени перехода в пример. Это связано с тем, что остальные два свойства остаются в значениях по умолчанию. Если вы не определяете какие-либо значения свойств в сокращенной форме, они просто прибегают к их умолчанию. Кроме того, обязательно используйте префиксы поставщика с этим свойством, поскольку он не поддерживается каждым браузером.

При использовании свойства перехода не забудьте определить свойство CSS, к которому будет применяться переход, если свойство div: hover с изменением высоты для элемента не существовало, тогда не было бы никакого эффекта перехода. Если с вашим переходом будет изменено более одного свойства, вы можете использовать свойство перехода в сокращении перехода, чтобы убедиться, что все необходимые переходы происходят.
Страна: (RU)
Kosten
Дата: Среда, 31.01.2018, 19:07 | Сообщение 2
Администраторы
Сообщений:16331
Награды: 53


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

Кто знает как они работают.

Вот демонстрацию сделал, но думаю что то по другому должно.

DEMO
Страна: (RU)
-SAM-
Дата: Четверг, 01.02.2018, 06:17 | Сообщение 3
Vip
Сообщений:362
Награды: 17


Цитата Kosten ()
Вот код, который нам нужен для достижения этого эффекта: [...]
Это верхний код, который вы опубликовали как пример перехода (задержки) на смену прозрачности (если такой там вообще был, по идеи идти должно было), вот и всё... всё написано в статье. Просто тот код пропишите ниже (именно, что идёт пример на изменение высоты блока, с задержкой).
Цитата Kosten ()
Вот демонстрацию сделал, но думаю что то по другому должно.
Всё работает, как и положено. Только, что не во всех браузерах (как и написано в статье, что нужно префиксы прописывать). Вот кроссбраузерно (естественно, что в более новых браузерах, которые поддерживают это свойство): https://jsfiddle.net/4hj4v9xy/1/
Прикрепления: 7459933.png(13Kb)




Сообщение отредактировал
-SAM- - Четверг, 01.02.2018, 06:48
Страна: (UA)
Kosten
Дата: Пятница, 02.02.2018, 05:26 | Сообщение 4
Администраторы
Сообщений:16331
Награды: 53


А, где можно такую функцию применить?
Страна: (RU)
Общий форум » Все для вебмастера » Начинающий Вебмастер » Как использовать свойство перехода CSS3 (Подробный обзор свойств CSS3-переходов)
Страница 1 из 11
Поиск: