Очень полезное свойство transitions (преобразования) позволяет получать интересные визуальные анимационные эффекты самым естественным путем, чисто через CSS, без таких технологий как JavaScript, Java, Flash.
Технология свойства transition (преобразование).
Преобразование CSS3 это эффекты, которые позволяют элементу переходить от одного стиля к другому.
Для получения требуемого эффекта необходимо сделать следующее:
- Определить свойство CSS к которому мы желаем добавить эффект.
- Определить продолжительность эффекта в секундах.
Эффект начнет действовать, когда требуемое свойство CSS меняет свою значение.
В данном примере это происходит при наведении курсора на объект и при клике по объекту (не отпуская левую кнопку мыши).
Обратите внимание, что при этом высота объекта меняется быстро, а ширина постепенно, в течение 1 секунды.
А вот если необходимо, чтобы эффекты действовали на несколько стилей, можно задавать эффекты для нескольких свойств, разделяя запятыми, например:
transition: width 1s, height 1s;
Пример использование всех свойств относящихся к transition (преобразованию).
Наведите на меня мышь и ждите...
