На кружке ниже я сделал анимацию и добавляю ему класс при клике, но при повторном клике я хочу чтобы он обратно плавно возвращался в исходную позицию, а он просто резко встаёт в исходную позицию. Как сделать плавное возвращение назад?
const circle = document.querySelector('.circle');
circle.addEventListener('click', function() {
this.classList.toggle('circle-animate')
})
@keyframes circle-animate {
0% {
margin: 0;
}
50% {
margin-left: 200px;
margin-top: 0;
}
to {
margin-left: 200px;
margin-top: 50px;
}
}
.circle {
width: 90px;
height: 90px;
background-color: #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 0 25px 3px #000;
}
.circle-animate {
animation-name: circle-animate;
animation-duration: 2s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
body {
background-color: gray;
}
<div class="circle">Кликни на меня</div>
ЗЫ: Сделал чтото подобное( https://jsfiddle.net/bpw36tnL/58/ ), но думаю это костыли и есть баг - если кликнуть по середине анимации она прервётся и кружок перейдёт в исходное состояние другой анимации. Не красиво