jak zrobić: najpierw zmiana koloru, a po przerwie zmiana padding, różne kroki animacji

0

Witam! Dołączę Od razu cały kod, nie jest duży.
A, więc tak klikam na div i stopniowo zmienia się kolor i jest wszystko git.
Teraz chciałbym aby po zakończeniu tej animacji była przerwa, np. 0.3s i włączyła się animacja w której zmienia się padding. Dlatego w funkcji blueFunction dodałem linijkę:

el.classList.toggle("startpadding");

Niestety wtedy przestaje działać zmiana koloru... kolor od razu zmienia się bez efektu przejścia...

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}

.bluestyle {
	cursor: pointer;
	width: 100%;
    padding: 1rem;
    background-color: #2E4A62;
    color: white;
    font-size: 25px;
}

.startcoloring {
  width: 100%;
  padding: 1rem;
  background-color: #2E4A62;
  animation-name: coloranimation;
  animation-fill-mode: forwards;
  animation-duration: 0.3s;
}

@keyframes coloranimation {
  from {background-color: #2E4A62;}
  to {background-color: #6F9FD8;}
}

.startpadding {
  width: 100%;
  padding: 1rem;
  animation-name: paddinganimation;
  animation-fill-mode: forwards;
  animation-delay: 0.3s;
  animation-duration: 0.5s;

}

@keyframes paddinganimation {
	from { padding: 1rem; }
    to { padding: 0.5rem; }
}
</style>
</head>
<body>


<div id="testdiv" onclick="blueFunction()" class="bluestyle">
This is my blue element!
</div>

<script>
const blueFunction = () => {
	const el = document.getElementById("testdiv");
    el.classList.toggle("startcoloring");
    el.classList.toggle("startpadding");
}
</script>

</body>
</html>
2

Do jednej klasy można podpiąć kilka animacji.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Jeśli dobrze przepisałem parametry z dokumentacji to 1s powinien być odpowiedzialny za czas trwania, a 0.3s to opóźnienie pomiędzy drugą animacją.

.animation {
  animation: 1s coloranimation ease 0.3s, 1s paddinganimation ease;
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1