CSS 动画回到原来的位置，但它不应该

Question

我正在尝试使用 CSS/JS 作为我的光标的一些动画。我想要一个跟随光标的圆圈 everywhere.When 我点击，我想改变这个圆圈的 scale/colour 使其变小，颜色不同，仍然以光标为中心。

首先，我使用 translate(-50%,-50%) 将 CSS 中光标的圆圈居中。然后，我找到的方法是加一个class thanks JS，这样就可以实现动画了，然后在动画完成后很快的去掉，这样函数就可以加多少个class有点击需要，然后删除

问题是，当我单击时，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>

非常感谢那些阅读我的人，对不起我的英语！

Answer 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>

CSS 动画回到原来的位置，但它不应该

CSS animation going back to its original position but it shouldn't

javascript

css

animation