Как сделать обратную анимацию?

Question

[urajo]

Есть https://codepen.io/narem/pen/XQZGgj кастомный чекбокс.
Вопрос в том, как сделать что бы при моменте снятия галочки - чекбокс медленно исчезал например?

Answer 1

[Rustam Bainazarov]

Анимация тут не нужна + вы фоновый рисунок задаете только на состояние :checked. Соответственно, если его нет, то и фоновая картинка мгновенно убирается, потому что это не анимируемое свойство в принципе (background-image). Нужно изначально задать все стили, потом уже использовать анимируемые свойства (opacity, transform).

Comments

[urajo]

так анимация задает вращение

[Rustam Bainazarov]

urajo, а тут этого вращения нет разве transform: rotateY(360deg);?

Понажимайте в моем примере кода на ваш лейбл, увидите, что галочка туда и обратно вращается.

[urajo]

Рустам Байназаров, а у такого метода вращения разве можно задать скорость вращения?

[Rustam Bainazarov]

urajo, если вы хотите выделить ваши анимации в отдельные keyframe (зачем), то можно так:


Только обратная анимация будет применяться при загрузке страницы + клик до того, как анимация закончилась, будет обрывать её, поэтому такой подход нужен только тогда, когда вы с помощью JS контролируете нажатия и пр.

[Rustam Bainazarov]

urajo, конечно ( О_о)

[Rustam Bainazarov]

urajo, вы же сами в изначальном примере зачем-то сделали свойство transition: .5s;.

Вот вам и скорость вашего перехода.

[Rustam Bainazarov]

Читайте комментарии:

Answer 2

[German_Berg]

var b=document.getElementById("myimg2");
 
function onMouseIconComm(){
    this.src="img/close_2.png";
}
 
function outMouseIconComm(){
   this.src = "img/close_3.png";
}
 
b.onmouseover=onMouseIconComm;
b.onmouseout=outMouseIconComm;