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

i'm trying some animation using CSS/JS for my cursor. I wanna have a circle that follows the cursor everywhere.When I click, I want to change the scale/colour of this circle so it gets smaller with a different color, still centered on the cursor.

First, I centered the circle on my cursor in CSS with translate(-50%,-50%). Then, the method I've found is to add a class thanks JS, that would realize the animation, and then to remove it pretty quickly after the animation is done, so the function can add as many classes required as there are clikcs, and then delete them.

The problem is that when I click, it seems like translate property in the CSS stop functioning, and the circle (.cursor1) starts the animation away from the cursor. I assume it's about the position of the div but don't know how to sort it out.

Here is the global code.

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 ></div>
<div ></div>

Thank you so much for those reading me, and sorry for my english !

CodePudding user response：

Are you looking for something like this? You need to combine the transforms into one property as shown:

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 ></div>
<div ></div>