Почему нельзя? И почему абсурд? надо просто показать что будет с дивом и спаном если изменить конкретные свойства, фон и цвет взяты просто для примера.

Что бы не пользоваться кнопками обновить установленнымм в браузере, надо сделать клик По элементу

Вас зовут Лена и у вас есть сестра Катя. Ваши имена в пределах вашей семьи есть уникальные идентификаторы. Ваш отец может обратиться к вам:
- Дочери мои.
И вы будете понимать, что это касается вас обоих. Если обращение по имени, то только конкретно кого-то из вас.
Для того чтобы распределить между вами обязанности, кто когда из вас ответственен по кухне, а кто по уборке, ваш отец решил так:
- Лена отвечает за кухню, Катя за уборку. Завтра Лена будет носить имя Катя и отвечать за уборку, а Катя будет Леной и отвечать за кухню. Потом имена опять поменяются и т.д.

Абсурд?

Ничего не понял, причем тут кнопки браузера и анимация.

Это нажатие по <div> без tabindex у вас как хлопок одной ладошкой или звук без источника звука... конечно можно изловчиться и нажать мышкой!

За что вы так ненавидите тех, у кого нет мыши?

Используйте <button> (вы же хотите, чтобы туда нажали, так используйте <button>, это кроссбраузерное решение), в данном случае <div> является совершенно бессмысленным!

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

А Лена и Катя причем? если меня назвали Ирой.
на странице
text-align описывается это свойство и надо показать что будет если изменить значение с left на right и только, ну это разумеется пример,

А при том, что атрибуты id, это те же Лена, Катя и т.п., имена которые индивидуальны среди множества элементов на странице, как и имена в кругу семьи. Но если смена имени в кругу семьи, это для вас тоже абсурд, то почему смена id на странице, это в порядке вещей?

Группу элементов на странице можно адресовать по общим признакам - имени тега, имени класса, и атрибутам, но за и исключением атрибута id. Атрибут id служит единственной задаче - адресации только одного элемента среди набора.

Если на странице имеются элементы с одинаковыми id, это непонимание их назначения. Если элементам даются id, которые затем изменяются на странице, значит это непорядок на странице. А всякое обсуждение по ротации id среди элементов на странице, это уже извращения. ;)

Без разницы, смотреть в компьютере или планшете или телефоне... всё одинаково работает... Ещё есть https://codepen.io/pen

Можно удалить элемент из DOM, а затем вставить в то же самое место, это приведёт к повторному запуску анимации.

UPD

Пример... каждый раз, как нажимаете на кнопку, анимация запускается заново...

<button id="animation">abc</button>

<style>

#animation {
	all: unset;
	position: relative;
	font-size: 300%;
}

#animation::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 3px;
	background: red;
	left: 0;
	top: 0;
	animation: animation 1s;
}


@keyframes animation {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

</style>

<script>

document.addEventListener("click", event => {
	var target = event.target;
	var parentNode = target.parentNode;
	
	parentNode.replaceChild(target, target);
});

</script>

Скрипт удаляет и вставляет обратно любой элемент на странице, вы можете уточнить, к каким элементам применяется анимация!

laimas, я уже представилась, значит можно сказать что мы почти познакомились, а теперь расскажи как обновить див при клике по нему а также при клике По кнопке