Вы напечатали код в посте №20...
Да, оно не работает, вам нужен sass c compass, autoprefixer и babel, которые превратили тот код в этот...
Ваш транспилированный пример
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Математический маятник</title>
<style>
.mathematics_pendulum {
width: 930px;
height: 500px;
background: linear-gradient(to top, #ade6ad, #e6e6cc);
border-radius: 50px/35px;
border: 1px solid #c0c0c0;
position: absolute;
}
#still_point {
display: inline-block;
width: 1px;
height: 1px;
background: transparent;
border: 45px solid transparent;
border-top-color: #000080;
position: absolute;
left: 420px;
}
#pendulum {
width: 75px;
height: 400px;
display: inline-block;
position: absolute;
top: 45px;
left: 428px;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: pendulum 10.03545s cubic-bezier(0.36, 0, 0.64, 1) forwards;
animation: pendulum 10.03545s cubic-bezier(0.36, 0, 0.64, 1) forwards;
}
#pendulum_rod {
width: 3px;
height: 325px;
background: #999;
display: inline-block;
border-radius: 2px;
position: absolute;
left: 36px;
}
#point_pendulum {
width: 75px;
height: 75px;
display: inline-block;
border-radius: 50%;
background: radial-gradient(circle at 60% 40%, #bfbfff, #0000ff);
position: absolute;
top: 325px;
}
@-webkit-keyframes pendulum {
0% {
-webkit-transform: rotate(1.5708rad);
transform: rotate(1.5708rad);
}
10% {
-webkit-transform: rotate(-1.44982rad);
transform: rotate(-1.44982rad);
}
20% {
-webkit-transform: rotate(1.13998rad);
transform: rotate(1.13998rad);
}
30% {
-webkit-transform: rotate(-0.76361rad);
transform: rotate(-0.76361rad);
}
40% {
-webkit-transform: rotate(0.43574rad);
transform: rotate(0.43574rad);
}
50% {
-webkit-transform: rotate(-0.21183rad);
transform: rotate(-0.21183rad);
}
60% {
-webkit-transform: rotate(0.08772rad);
transform: rotate(0.08772rad);
}
70% {
-webkit-transform: rotate(-0.03095rad);
transform: rotate(-0.03095rad);
}
80% {
-webkit-transform: rotate(0.0093rad);
transform: rotate(0.0093rad);
}
90% {
-webkit-transform: rotate(-0.00238rad);
transform: rotate(-0.00238rad);
}
100% {
-webkit-transform: rotate(0.00052rad);
transform: rotate(0.00052rad);
}
}
@keyframes pendulum {
0% {
-webkit-transform: rotate(1.5708rad);
transform: rotate(1.5708rad);
}
10% {
-webkit-transform: rotate(-1.44982rad);
transform: rotate(-1.44982rad);
}
20% {
-webkit-transform: rotate(1.13998rad);
transform: rotate(1.13998rad);
}
30% {
-webkit-transform: rotate(-0.76361rad);
transform: rotate(-0.76361rad);
}
40% {
-webkit-transform: rotate(0.43574rad);
transform: rotate(0.43574rad);
}
50% {
-webkit-transform: rotate(-0.21183rad);
transform: rotate(-0.21183rad);
}
60% {
-webkit-transform: rotate(0.08772rad);
transform: rotate(0.08772rad);
}
70% {
-webkit-transform: rotate(-0.03095rad);
transform: rotate(-0.03095rad);
}
80% {
-webkit-transform: rotate(0.0093rad);
transform: rotate(0.0093rad);
}
90% {
-webkit-transform: rotate(-0.00238rad);
transform: rotate(-0.00238rad);
}
100% {
-webkit-transform: rotate(0.00052rad);
transform: rotate(0.00052rad);
}
</style>
</head>
<body>
<div tabindex="0" class="mathematics_pendulum" role="button" aria-label="Проиграть анимацию маятника" onclick="restartAnimation(this)" ontouchstart="restartAnimation(this)" onkeydown="restartAnimation(this)">
<span id="still_point"></span>
<span id="pendulum">
<span id="pendulum_rod"></span>
<span id="point_pendulum"></span>
</span>
</div>
<script>
"use strict";
function restartAnimation(target) {
var parentNode = target.parentNode;
var comment = document.createComment("");
parentNode.replaceChild(comment, target);
setTimeout(function() {
parentNode.replaceChild(target, comment);
});
};
</script>
</body>
</html>
Транспилированный пример с Codepen
<button class="pendulum"></button>
<style>
.pendulum {
width: 255px;
background: #cfe6cf;
border-radius: 15px / 12px;
border: 1px solid #c0c0c0;
padding: 0;
}
.pendulum::before {
content: "";
display: block;
width: 0;
margin: auto;
border: 15px solid transparent;
border-top-color: #000080;
border-bottom-width: 0;
}
.pendulum::after {
content: "";
display: block;
margin: auto;
margin-bottom: 8px;
width: 25px;
height: 100px;
background: radial-gradient(closest-side circle at 50% 87.5%, #0000ff 90%, rgba(0, 0, 0, 0)), linear-gradient(to right, rgba(0, 0, 0, 0) 47%, #999999, rgba(0, 0, 0, 0) 53%);
-webkit-mask: radial-gradient(closest-side circle at 45% 84.5%, rgba(0, 0, 0, 0.3), #000000 136%);
mask: radial-gradient(closest-side circle at 45% 84.5%, rgba(0, 0, 0, 0.3), #000000 136%);
transform-origin: 50% 0;
animation: pendulum 10.03545s cubic-bezier(0.36, 0, 0.64, 1) forwards;
}
@keyframes pendulum {
0% {
transform: rotate(1.5708rad);
}
10% {
transform: rotate(-1.44982rad);
}
20% {
transform: rotate(1.13998rad);
}
30% {
transform: rotate(-0.76361rad);
}
40% {
transform: rotate(0.43574rad);
}
50% {
transform: rotate(-0.21183rad);
}
60% {
transform: rotate(0.08772rad);
}
70% {
transform: rotate(-0.03095rad);
}
80% {
transform: rotate(0.0093rad);
}
90% {
transform: rotate(-0.00238rad);
}
100% {
transform: rotate(0.00052rad);
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.matches"></script>
<script>
addEventListener("click", function(event) {
const target = event.target;
if(target.matches(".pendulum")) {
const parentNode = target.parentNode;
const comment = document.createComment("");
parentNode.replaceChild(comment, target);
setTimeout(function() {
parentNode.replaceChild(target, comment);
});
}
});
</script>
Сложный вы путь выбрали, теперь транспилированный код вы будете редактировать как исходный...
Вопросы:- Почему среди возможных решений вы выбираете самое сложное и многословное?
- В каком учебнике вы прочитали про ошибочное и проблемное учение «нажать на <div>», которое вы активно пытаетесь продвинуть?