Анимация CSS возвращается в исходное положение, но не должна

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

Во-первых, я центрировал круг на моем курсоре в CSS с помощью translate(-50%,-50%). Затем метод, который я нашел, состоит в том, чтобы добавить класс благодаря JS, который будет реализовывать анимацию, а затем довольно быстро удалить его после завершения анимации, чтобы функция могла добавить столько классов, сколько требуется кликов, и затем удалите их.

Проблема в том, что когда я нажимаю, кажется, что свойство перевода в CSS перестает работать, и круг (.cursor1) запускает анимацию от курсора. Я предполагаю, что дело в позиции div, но не знаю, как с этим разобраться.

Вот глобальный код.

var cursor1 = document.querySelector(".cursor1");
var cursor2 = document.querySelector(".cursor2");

function cursorAnimationRemove() {
  cursor1.classList.remove("cursoranimation");
};


/* Function that add the animation class when there is a click, and delete it after 500 ms */
document.addEventListener('click', function() {
  cursor1.classList.add("cursoranimation");
  setTimeout(cursorAnimationRemove, 500);
});


/*Function that allows both circles to track the mouse */
document.addEventListener('mousemove', function(e) {
  cursor1.style.cssText = cursor2.style.cssText = "left: " + e.clientX + "px; top: " + e.clientY + "px;";
});
.cursor1 {
  position: fixed;
  width: 70px;
  height: 70px;
  border: 1px solid black;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.cursor2 {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: #c6c6c6;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.cursoranimation {
  transform: scale(1);
  animation: cursoranimation2 1000ms backwards;
  border: none;
}


@keyframes cursoranimation2 {
    0% {
        background-color: white;
        transform: scale(1);
        transform:translate(-15%,-15%);
    }
    50% {
        background-color: rgb(179, 247, 202);
        transform:scale(0.6);
        transform:translate(-25%,-25%);
    }
    75% {
        background-color: rgb(179, 247, 202);
        transform:scale(0.4);
        transform:translate(-35%,-35%);
    }
    100% {
        background-color: rgb(132, 247, 176);
        transform:scale(0.3);
        transform:translate(-50%,-50%);
    }
}
<div class="cursor1"></div>
<div class="cursor2"></div>

Большое спасибо тем, кто читает меня, и извините за мой английский!

Добавьте код ключевого кадра cursoranimation2 во фрагмент.

Anurag Srivastava 23.04.2022 10:53

@AnuragSrivastava Сорри, я забыл. Вот. В этой версии повторно применить перевод, но это не сработало.

Neo78 23.04.2022 11:02
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
2
22
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы ищете что-то подобное? Вам нужно объединить преобразования в одно свойство, как показано ниже:

var cursor1 = document.querySelector(".cursor1");
var cursor2 = document.querySelector(".cursor2");

function cursorAnimationRemove() {
  cursor1.classList.remove("cursoranimation");
};


/* Function that add the animation class when there is a click, and delete it after 500 ms */
document.addEventListener('click', function() {
  cursor1.classList.add("cursoranimation");
  setTimeout(cursorAnimationRemove, 500);
});


/*Function that allows both circles to track the mouse */
document.addEventListener('mousemove', function(e) {
  cursor1.style.cssText = cursor2.style.cssText = "left: " + e.clientX + "px; top: " + e.clientY + "px;";
});
.cursor1 {
  position: fixed;
  width: 70px;
  height: 70px;
  border: 1px solid black;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.cursor2 {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: #c6c6c6;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.cursoranimation {
  transform: scale(1);
  animation: cursoranimation2 1000ms backwards;
  border: none;
}


@keyframes cursoranimation2 {
    0% {
        background-color: white;
        transform: translate(-50%,-50%) scale(1);
    }
    50% {
        background-color: rgb(179, 247, 202);
        transform: translate(-50%,-50%) scale(0.6); /* translate + scale */ 
    }
    75% {
        background-color: rgb(179, 247, 202);
        transform: translate(-50%,-50%) scale(0.4);
    }
    100% {
        background-color: rgb(132, 247, 176);
        transform: translate(-50%,-50%) scale(0.3);
    }
}
<div class="cursor1"></div>
<div class="cursor2"></div>

Другие вопросы по теме