Как сделать, чтобы при нажатии по блоку анимация выполнялась в одну сторону, а при нажатии на абзац — в другую сторону (в обратном порядке, как переход)?
$(document).ready(function() {
$('div').click(function() {
$('div').toggleClass('a1').removeClass('a2');
});
$('p').click(function() {
$('div').toggleClass('a2').removeClass('a1');
});
});
div {
width: 200px;
height: 200px;
background: black;
position: relative;
}
.a1 {
animation: vras 3s forwards;
}
.a2 {
animation: vras 3s alternate-reverse forwards;
}
@keyframes vras {
from {
left: 0;
}
33% {
left: 85%;
}
66% {
left: 0;
}
to {
left: 500px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<p>123</p>
p
чёрный блок должен плавно двигаться так же в обратном направлении?