Не пугайтесь переходов CSS, они могут казаться сложными, если вы ничего не знаете о них, но на самом деле они довольно просты и легко реализуются. Переходная анимация возникает, когда значение любого свойства элемента запускается для изменения часто что-то подобное происходит, когда вы реализовали эффект зависания.
Предположим, у вас есть кнопка, которую вы хотите сделать более прозрачной, когда она зависает, но вы хотите, чтобы произошел постепенный переход, поэтому изменение непрозрачности не является резким или жестким. Вот где код перехода приходит. Чтобы выполнить плавный, красивый переход CSS, вам действительно нужно несколько строк простого CSS-кода.
Очень важно, чтобы вы не забыли включить длительность перехода, или время продолжительности будет по умолчанию равным 0, а эффект перехода не произойдет. Также не забудьте использовать s (секунды) для количественного определения продолжительности. Давайте посмотрим пример этого в действии. Для целей этого примера предположим, что мы хотим добавить эффект перехода к изменению высоты элемента div при наведении. Вот код, который нам нужен для достижения этого эффекта:
ак вы можете видеть, мы включили только значения свойств перехода и времени перехода в пример. Это связано с тем, что остальные два свойства остаются в значениях по умолчанию. Если вы не определяете какие-либо значения свойств в сокращенной форме, они просто прибегают к их умолчанию. Кроме того, обязательно используйте префиксы поставщика с этим свойством, поскольку он не поддерживается каждым браузером.
При использовании свойства перехода не забудьте определить свойство CSS, к которому будет применяться переход, если свойство div: hover с изменением высоты для элемента не существовало, тогда не было бы никакого эффекта перехода. Если с вашим переходом будет изменено более одного свойства, вы можете использовать свойство перехода в сокращении перехода, чтобы убедиться, что все необходимые переходы происходят.
Вот код, который нам нужен для достижения этого эффекта: [...]
Это верхний код, который вы опубликовали как пример перехода (задержки) на смену прозрачности (если такой там вообще был, по идеи идти должно было), вот и всё... всё написано в статье. Просто тот код пропишите ниже (именно, что идёт пример на изменение высоты блока, с задержкой).
ЦитатаKosten ()
Вот демонстрацию сделал, но думаю что то по другому должно.
Всё работает, как и положено. Только, что не во всех браузерах (как и написано в статье, что нужно префиксы прописывать). Вот кроссбраузерно (естественно, что в более новых браузерах, которые поддерживают это свойство): https://jsfiddle.net/4hj4v9xy/1/
