В этом уроке мы рассмотрим интересные возможности переходов CSS3. Мы покажем, как сделать так, чтобы у элемента был переход при событии “mouseout” или “mouseleave”, т. е., при отведении указателя мыши от элемента, но не было перехода при событии “mouseover” или “mouseenter”, т. е., при наведении указателя мыши. Вот нужный код CSS:

.mouseout {
        width: 300px;
        height: 300px;
        margin: 100px auto;
        background-color: #bada55;
        -webkit-transition: -webkit-transform 2s linear;
        transition: transform 2s linear;
}

.mouseout:hover {
        cursor: pointer;
        -webkit-transition: -webkit-transform 0s linear;
        transition: transform 0s linear;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
} 

А вот ссылка на страницу с демонстрацией:

Демонстрация работы 

Обратите внимание на то, что происходит при наведении и отведении указателя мыши. При наведении как будто бы ничего не происходит, а вот отведение запускает трансформацию вращения.

Как это работает? 

Тут нет ничего особо сложного. Сначала воспользуемся тем фактом, что для состояний наведения и отведения указателя мыши могут быть заданы разные переходы. А потом используем значение длительности перехода 0s, чтобы скрыть переход при наведении указателя мыши.

Обратите внимание, что при наведении указателя мыши блок поворачивается на 360 градусов. Такой поворот не изменяет положение блока, так как 360 градусов — это полный круг, и блок вернется в то положение, в котором был изначально. Но так как длительность перехода — ноль секунд, то переход происходит мгновенно. Так что создается впечатление, что перехода нет вообще.

Еще один способ для создания такого эффекта, как указал Federico, — вместо записи длительности перехода 0s использовать transition: none.

После этого при отведении указателя мыши запустится переход, который возвращает элемент в его исходное состояние, даже если он уже находится в исходном состоянии. Переход при отведении указателя мыши произойдет за две секунды, так что он будет виден и сымитирует событие “mouseout”, происходящее без события “mouseover”.

Демонстрация работы 

Надеемся, Вам понравился этот урок и он Вам пригодится.

Автор урока Louis Lazaris

Перевод — Дежурка

Смотрите также:

• Классические типографские эффекты с использованием CSS: первая строка вступления
• Использование альтернативных единиц измерения для трансформаций поворота CSS3
• Использование отрицающего псевдокласса CSS3