[Malleys]

просто дайте формулы для этих расчётов

просто дайте формулы для этих расчётов

Если вам формулы «дадут», а не «просто дадут», то это какое-то другое значение будет для вас иметь?

дайте формулы

Рассмотрите внимательно пост №2

надо высчитать правильный угол

Это математический маятник, у него крайние значения угла отклонения не меняется со временем. В начале вы написали условия для маятника, среди которых было θ₀ = 90°, значит угол отклонения с противоположной стороны тоже составляет 90°.

надо высчитать... точное время

Также вы указали, что g = 9.8 и l = 1, статья, которую я вам указал, содержит практически всю информацию о математическом маятнике, включая формулу для вычисления периода колебания (вперёд и назад, полное колебание).



Подставим ваши данные, получается T = 2π ⋅ sqrt(1 / 9.8) ≈ 2 (сек.)

В CSS есть функция cubic-bezier(x₁, y₁, x₂, y₂), возможно ли при помощи неё выразить половину периода колебания маятника? Да, возможно! (Я не буду описывать, как это получается, вот рабочий лист с графиками https://www.desmos.com/calculator/qxtb8h7li7)

Математический маятник

<div class="pendulum"></div>
<style>

	.pendulum {
		width: 255px;
		height: 125px;
		background: #cfe6cf;
		border-radius: 15px / 12px;
		border: 1px solid #c0c0c0;
	}

	.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;
		width: 25px;
		height: 100px;
		background:
			radial-gradient(closest-side circle at 50% 87.5%, #0000ff 90%, transparent),
			linear-gradient(to right, transparent 47%, #999, transparent 53%)
		;
		--mask: radial-gradient(closest-side circle at 45% 84.5%, rgba(0, 0, 0, .3), black 136%);
		-webkit-mask: var(--mask);
		mask: var(--mask);
		transform-origin: 50% 0;
		animation: pendulum 1s alternate infinite cubic-bezier(0.36, 0, 0.646, 1);
	}

	@keyframes pendulum {
		from {
			transform: rotate(90deg);
		}

		to {
			transform: rotate(-90deg);
		}
	}

</style>

надо высчитать... точное время

Оно равно θ(t), где t принимает значения 0, 1/2 * T, T, 3/2 * T, 2 * T, ..., k/2 * T; k ∈ N. Для математического маятника вы получите всегда одинаковые крайние значения, но можно построить маятник, который со временем придёт к состоянию равновесия из-за трения. Пусть функция выражающая количество энергии равна f(t) и представлена при помощи графика (зелёная пунктирная линия, см. рабочий лист). Тогда можно представить маятник с затухающими колебаниями при помощи f(t) ⋅ θ(t).

То самое, что я не могла найти, всё супер.

Вам только нужно, чтобы анимация запускалась или маятник правильно работал или то и другое?

как обновить див с анимацией по клику по самому диву без всяких кнопок

Так нажать по чему-то подразумевает, что вы попадёте на кнопку! Вы требуете странное, хотите нажать, но кнопку вам не надо! Это как хлопнуть в ладоши без ладошей! (Вы уже это где-то прочитали!) Да, оно работает с мышью, но оно не работает с клавиатуры, оно не работает на некоторых телефонах, оно не работает на Android TV, оно не воспринимается скинридерами как кнопка ... т. е. вы не сможете запустить свою анимацию заново!

Вот переделанный пример из поста №2... (с применением выше написанного)

Маятник с затухающим колебанием, запускается заново при нажатии на него

<button class="pendulum"></button>

<style>

	.pendulum {
		width: 255px;
		background: #cfe6cf;
		border-radius: 15px / 12px;
		border: 1px solid #c0c0c0;
		padding: 0;
		display: block;
	}

	.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%, transparent),
				linear-gradient(to right, transparent 47%, #999, transparent 53%)
	;
		--mask: radial-gradient(closest-side circle at 45% 84.5%, rgba(0, 0, 0, .3), black 136%);
		-webkit-mask: var(--mask);
		mask: var(--mask);
		transform: rotate(var(--θ));
		transform-origin: 50% 0;
	}

</style>

<script>{
	const pendulumElement = document.querySelector(".pendulum");
	var startTime;

	function setNewStartTime() {
		startTime = Date.now() / 1000
	}

	setNewStartTime();

	(function loop() {
		const t = Date.now() / 1000 - startTime;
		const θ = 0.5 * Math.PI * Math.cos(Math.sqrt(9.8) * t);
		const f = Math.exp(-.25 / Math.PI * t * t);
		pendulumElement.style.setProperty("--θ", `${f * θ}rad`);
		requestAnimationFrame(loop);
	})();

	pendulumElement.addEventListener("click", setNewStartTime);
}</script>

Вы просите одно, а ожидаете другое. Формулируйте свои вопросы более точно, указывайте все подробности. Указывайте, что вы делали, что именно у вас не получается, и пусть это будет в одной теме!

UPD

Так?

Вы спрашиваете так, как будто это у меня что-то не получается, а вы якобы нашли решение, и вопрошаете, действительно ли мне такое подходит!