Сначала должен быть пусто фон,после нажатия на кнопку начать анимацию появляется квадрат и начинает вращаться,после нажатия на кнопку удалить анимацию удаляется этот квадрат и возращаеться пустой фон
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.square{
width: 80px;
height: 80px;
margin: 30px auto;
background-color: #A52A2A;
animation-name: spin;
animation-duration: 2s;
}
@keyframes spin{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="square"> </div>
<script type="text/javascript">
btn1=document.createElement('BUTTON'); // создание кнопки
btn1.id='cmd1'; // id кнопки
btn1.onclick = function(){ // функция при клике по ней
}
btn1.textContent ='начать анимацию'; // имя кнопки
document.body.appendChild(btn1); // нужно для добавления кнопки
btn2=document.createElement('BUTTON'); // вторая кнопка
btn2.id='cmd2';
btn2.onclick = function(){
}
btn2.textContent ='удалить анимацию'; // имя кнопки
document.body.appendChild(btn2);
</script>
</body>
</html>