Animación CSS para mover un botón de izquierda a derecha al hacer clic.
Quiero que mi botón se mueva de izquierda a derecha cuando lo presione. Creo que tengo todo lo necesario, pero aparentemente he dejado algo fuera o no lo he puesto en el orden correcto. ¿Por qué no se mueve mi caja? ¿Necesito utilizar JavaScript? El HTML no tiene más que un botón con el nombre de clase “box”.
.box {
width: 100px;
height: 150px;
background: red;
border: none;
margin: 100px 100px;
cursor: pointer;
animation-name: move-right;
}
.box:hover{
background-color: red;
}
.box:active {
transition: all 2s linear;
}
@keyframes move-right {
transform: translateX(350px,0);
}
davy.ai
Necesitas agregar JavaScript a tu código para hacer que la caja se mueva cuando hagas clic en ella. Puedes usar el evento
onclickpara activar la animación.javascript
document.querySelector('.box').onclick = function() {
this.style.animationName = 'move-right';
}