Анимация css по кнопке js

#javascript #css #html5

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














 
 







    

Ответы

Ответ 1

btn1 = document.createElement('BUTTON');  // создание кнопки
btn1.id = 'cmd1';  // id кнопки
btn1.onclick = function () { // функция при клике по ней
	document.getElementsByClassName('square')[0].style.display = 'block';
}
btn1.textContent = 'начать анимацию'; // имя кнопки
document.body.appendChild(btn1); // нужно для добавления кнопки

btn2 = document.createElement('BUTTON');  // вторая кнопка
btn2.id = 'cmd2';
btn2.onclick = function () {
	document.getElementsByClassName('square')[0].style.display = 'none';
}
btn2.textContent = 'удалить анимацию'; // имя кнопки
document.body.appendChild(btn2);
.square {
	width: 80px;
	height: 80px;
	margin: 30px auto;
	background-color: #A52A2A;
	animation-name: spin;
	animation-duration: 2s;
	display: none;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}