I have a little problem with the animation css of my circle.
The center of the animation is not displayed correctly where I click.
The translation(-50%, -50%) works only after the animation.
Here is a demo: https://plnkr.co/edit/0UMwaZgBmiXWlU61EE2m
Do you have an idea how to deal with that?
// Code goes here
function printMousePos(event) {
var element = document.getElementById("body");
var para1 = document.createElement("div");
para1.className = "circle";
para1.setAttribute("style", "position : absolute;left:" + event.clientX + "px;top:" + event.clientY + "px");
element.appendChild(para1);
var para2 = document.createElement("div");
para2.className = "point";
para2.setAttribute("style", "position : absolute;left:" + event.clientX + "px;top:" + event.clientY + "px");
element.appendChild(para2);
console.log(event.clientX, event.clientY);
}
document.addEventListener("click", printMousePos);/* Styles go here */
body {
position: relative;
height: 1000px;
}
@keyframes circle {
from {
transform: scale(0, 0)
}
to {
transform: scale(2, 2)
}
}
.circle {
color: blue;
width: 200px;
height: 200px;
border-style: solid;
border-width: 20px;
border-color: blue;
border-radius: 50%;
transform: translate(-50%, -50%);
animation-name: circle;
animation-duration: 1s;
animation-iteration-count: 3;
/*transform-origin: 0 0;*/
}
.point {
color: red;
border-style: solid;
border-width: 5px;
border-color: red;
border-radius: 50%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body id="body">
<h1>Click Everywhere</h1>
</body>
</html>Thanks!