Id 选择器优先于类：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
更换
.animate {
clip-path: circle(150% at 0% 50%)
}
与：
#d2.animate {
clip-path: circle(150% at 0% 50%)
}
<!DOCTYPE html>
<html lang="it">
<head>
<style>
#d1 {
width: 300px;
height: 300px;
background-color: lightblue;
position: relative;
}
#d2 {
width: 100%;
height: 100%;
background-color: orange;
clip-path: circle(0% at 0% 50%);
transition: clip-path 0.7s ease-in-out;
}
#d2.animate {
clip-path: circle(150% at 0% 50%)
}
</style>
</head>
<body>
<h2>The clip-path property</h2>
<div id="d1">
<div id="d2"></div>
</div>
<script>
let d1 = document.getElementById("d1");
let d2 = document.getElementById("d2");
d1.addEventListener("mouseenter", function() {
d2.classList.add("animate");
});
d1.addEventListener("mouseleave", function() {
d2.classList.remove("animate");
});
</script>
</body>
</html>