#фишка дня

Как анимировать элемент по клику на чистом CSS?

Ведь псевдокласс :active даётся ровно в тот момент, когда ты нажимаешь кнопку мыши и тут же пропадает, как кнопка была отжата.

Например, как сделать эффект «копирования» текста, как на видео? Совсем неохота навешивать что-то ещё на onmousedown и onmouseup...

Ответ на самом деле не столь очевиден, как может показаться. И имя ему :not(:active).

Схема работы проста. Навесили конечное состояние перехода на неактивное состояние, а на активное — установили начальное.

Выглядит в итоге как-то так:

https://codepen.io/alinaki/pen/wvEdaWG

И никакого жонглирования классами не надо.

#css #active #click #animation

#фишка дня

Как анимировать элемент по клику на чистом CSS?

Ведь псевдокласс :active даётся ровно в тот момент, когда ты нажимаешь кнопку мыши и тут же пропадает, как кнопка была отжата.

Например, как сделать эффект «копирования» текста, как на видео? Совсем неохота навешивать что-то ещё на onmousedown и onmouseup...

Ответ на самом деле не столь очевиден, как может показаться. И имя ему :not(:active).

Схема работы проста. Навесили конечное состояние перехода на неактивное состояние, а на активное — установили начальное.

Выглядит в итоге как-то так:

https://codepen.io/alinaki/pen/wvEdaWG

И никакого жонглирования классами не надо.

#css #active #click #animation #бородач