Animazione di una Div al comando click

Ciakko

Nuovo Utente
5 Giu 2014
11
0
1
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.
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:
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:

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!!
 
Discussioni simili
Autore Titolo Forum Risposte Data
A Problema nel passaggio di una animazione da flash a animate Flash 9
matteoraggi [PHP] Trasformare una animazione html5 in un file video PHP 0
A Controllare l'animazione di una skills bar realizzata con i keyframes css3 Javascript 1
S jQueryRotate - più di una animazione jQuery 3
rok Inserire link ad una parola in un animazione flash (finestra full screen) Flash 1
G ritardo di una animazione Flash 2
J [Javascript] Inserire un caricamento con animazione prima dell'esecuzione di un'azione Javascript 1
W [HTML] Animazione menu mobile HTML e CSS 0
A [Javascript] avviare un animazione js allo scroll della pagina Javascript 7
G [Javascript] Fermare animazione Javascript 1
D script per far funzionare l'animazione Javascript 4
D script per far funzionare l'animazione Presentati al Forum 1
L Animazione video con CSS HTML e CSS 2
O Animazione in flash di un personaggio Flash 2
kungfujava Bootstrap e animazione caricamento pagina HTML e CSS 0
M Flash CS 5.5 Animazione 3D Flash 0
F animazione pagine menù Javascript 0
K Animazione fiamme Flash 9
L Animazione: testo 'che si scrive da solo', carattere per carattere Snippet Javascript 0
emanuelevt [RISOLTO] animazione pulsante con fade jQuery 1
D Aiutoooooo problem con animazione!!! Webdesign e Grafica 0
F Animazione jQuery scroll - ancore, si può fare? Javascript 1
P animazione flash nella home di un sito Webdesign e Grafica 3
andreas88 problema animazione immagine HTML e CSS 3
renoir09 Animazione ed Ipad Smartphone e tablet 0
L Come creare animazione Flash 1
S Animazione immagine Flash 2
R animazione fade Javascript 2
davide1982 Problema animazione con animate e hover Javascript 4
P Creare animazione con foto Webdesign e Grafica 5
B sincronizzare musica con partenza animazione shockwave Javascript 0
N preload background image animazione sequenza Javascript 1
Z [AS3] Rendere attivo pulsante dentro animazione di altro pulsante Flash 0
S Comando per ricaricare animazione Flash 0
S Non vedo animazione su browser Flash 3
G creare bordo animazione Flash 0
A Photoshop cs3 : problema animazione Photoshop 4
A azione per animazione Flash 3
S Non ripetere l'animazione se già caricata Flash 1
C Bordo superiore animazione flash Flash 1
S Problema Animazione Titolo Flash 3
P Pulsante con Animazione Interna Flash 1
M Animazione flash che riempie l'intero <div> come fare?? Flash 3
M includere animazione flash in pagina html Flash 1
M animazione che prende l'intero frame Flash 6
R animazione pennello che scrive Flash 2
G Tornare in un punto preciso dell'animazione! Flash 3
B Animazione SWF casuale PHP 4
O animazione ad ONDA Flash 1
L Flash: ripetere un'animazione per n volte Flash 3

Discussioni simili