CSS свойство transition
Добрый вечер, сегодня я хочу изучить с Вами очередную тему посвященную языку CSS, а именно его CSS свойство transition. Данная возможность была добавлена разработчиками в CSS3, и честно сказать они немного поразили этой возможностью. Теперь при помощи языка CSS у нас появилась возможность, реализовывать эффект перехода из двух состояний элемента. Это можно назвать небольшой анимацией, которая будет реализована Вами на языке CSS. Приведу Вам пример использования CSS свойства transition. Мы возьмем с Вами блок, который в течение пяти секунд должен будет из начального положения переместиться в указанное нами положение, при этом изменит свой размер. Приступим к реализации, для этого нам понадобится довольно простая html структура.
<html>
<head>
<title>CSS свойство transition</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div></div>
</body>
</html>
Настало время реализовать задуманный нами эффект:
div {
background: #e55;
transition: margin 5s, width 5s, height 5s;
height: 50px;
width: 50px;
}
div:hover {
margin: 0 0 0 200px;
height: 100px;
width: 100px;
}
Мы изначально задаем цвет фона для блока, ширину и высоту равную по пятьдесят пикселей. И задаем эффект перехода, в котором указываем три свойства которые будут меняться в течение пяти секунд. И при наведении мыши на элемент блока, мы будем изменять начальные свойства указанные блоку, на конечные свойства, которые будут применены при наведении курсора мыши, и все это будет происходить в течение пяти секунд.
Для работы эффекта перехода достаточно задать два значения у свойства, что мы и сделали в нашем примере. Первое значение отвечает за свойство, которое будет изменяться при определенном действии, вторым значением указывается время, в течение которого будет происходить данное действие. Однако еще есть третий и четвертый параметр. Третий отвечает за скорость изменения свойства, по умолчанию принимается значение ease, остальные значения Вы можете посмотреть в справочнике, но я скажу Вам, что мне пока не приходилось их использовать в своей практике. И последнее значение указывается также в секундах и означает, в течение какого времени будет происходить задержка работы эффекта перехода. Данное значение по умолчанию принимает значение ноль секунд и означает, что никакой задержки производиться не будет.
Как видите, в нашем случае мы указали через запятую несколько значений, которые будут изменяться через определенное время, однако, Вы можете указать и одно свойство, и более чем два, но если необходимо, чтобы изменялись все свойства, то Вы можете вместо css свойств использовать ключевое слово all. Об этом свойстве мы поговорили, Вам осталось лишь увидеть результат выполнения кода собственными глазами, что я Вам сейчас и предлагаю сделать. На этом мы завершаем данную статью, успехов Вам!
