Buongiorno, mi sono impelagato nel progettare la mia pagina web. Ho fatto davvero molte ricerche e tentativi ma sono ad un punto morto. Vi sarei veramente grato per un aiuto.

Sto cercando un modo per far partire l'animazione di una div al click di un bottone e fare il reverse dell'animazione ad un nuovo click dello stesso pulsante o anche su di uno differente.
In sostanza ho una div container ed una div content. La div content è proporzionata in percentuale rispetto al container. Vorrei che il content si rimpicciolisse con un click e tornasse alla sua dimensione originale con un nuovo click.

Usando la funzione :hover e :focus l'animazione parte tranquillamente ma ho bisogno che parta ad un click.

codice HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>

<style type="text/css">
.container {position: absolute; width:90%; height:100%; left:5%; min-width:1000px; border: 1px solid #000}
.content {position:relative; width:60%; height:90%; top:1%; left:35%; border: 1px solid #000}
.nav {position:absolute; width:20%; height:90%; min-height:700px; top:1%; left:1%; padding:1%; border: 1px solid #000}
.bottone {position:relative; width:90%; height:10%; border:1px solid red;text-align:center;}

.nav:hover ~ .content {transform-origin:right top; -webkit-transform-origin:right top;transform:scale(0.5);-webkit-transform:scale(0.5); transition:all 2s ease-in; -webkit-transition:all 2s ease-in;}
</style>
</head>

<body>

<div class="container">
<div class="nav">
</div>
<div class="content"></div>

</div>
</body>
</html>


Ho provato quindi ad inserire un label ma così non parte:
codice HTML:
#start:checked ~ .content {transform-origin:right top; -webkit-transform-origin:right top;transform:scale(0.5);-webkit-transform:scale(0.5); transition:all 2s ease-in; -webkit-transition:all 2s ease-in;}

<label for="start">Clicca qui</label>

Ho quindi optato per creare un @keyframes, mettere in pausa l'animazione all'avvio e con un codice java cambiare lo state dell'animazione in running:
codice HTML:
.content { transform-origin: right top; animation: ridurre 1s ease-out; animation-direction: alternate; animation-fill-mode:forwards; animation-play-state: paused;}

@keyframes ridurre{
from {transform:scale(1.0);
}
to {transform:scale(0.5);
}
}

window.onload = function () {
  document.getElementById('riduci').onclick = function () {
    var elems = document.getElementsByClassName('content');
    for (var i = 0; i < elems.length; i++) { elems[i].style.animationPlayState = 'running';};
}
}

<label id="riduci">
<div id="bottone"><img src="images/riduci.png" alt="riduci" width="100%"></div>
</label>
In questa maniera l'animazione parte e si interrompe all'ultimo frame, ma siccome non conosco java non ho idea di come dirgli di riprendere l'animazione al nuovo click in reverse.

Qualche consiglio per continuare su questa strada o c'è qualche altro modo che conoscete?

Grazie mille!!