CSS making a :active toggled
<p>i am trying to create a web presentation and wanted to a add a little Animation of 2 Halfes which moves up and down on a Click (which works so far) but i also want them to stay there after the click.</p>

<p><a href="http://img5.fotos-hochladen.net/uploads/3ozt9kfyr08.jpg" rel="nofollow noreferrer">standard looking version http://img5.fotos-hochladen.net/uploads/3ozt9kfyr08.jpg</a>
<a href="http://img5.fotos-hochladen.net/uploads/2lpdyoktws6.jpg" rel="nofollow noreferrer">0.75 seconds after the click on the logo in the middle http://img5.fotos-hochladen.net/uploads/2lpdyoktws6.jpg</a>
<a href="http://img5.fotos-hochladen.net/uploads/18cd9xfjg21.jpg" rel="nofollow noreferrer">after the animation http://img5.fotos-hochladen.net/uploads/18cd9xfjg21.jpg</a></p>

<p>This is my Code for that: HTML</p>

<pre><code>    &lt;body&gt;
    &lt;a href="#" id="btn_logo" onclick="return false"&gt; &lt;div id="animation"&gt;      
            &lt;div id="logo"&gt; &lt;/div&gt;  
            &lt;div id="up"&gt; &lt;/div&gt;
            &lt;div id="down"&gt; &lt;/div&gt;
        &lt;/div&gt;&lt;/a&gt;
</code></pre>

<p>and then made the animation with:</p>

<pre><code>#btn_logo:active #up
</code></pre>

<p>and</p>

<pre><code>#btn_logo:active #down
</code></pre>

<p>How could i make the animation toggled after it ended?</p>