Marcel Schulz Marcel Schulz - 1 year ago 149
CSS Question

CSS making a :active toggled

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.

standard looking version
0.75 seconds after the click on the logo in the middle
after the animation

This is my Code for that: HTML

<a href="#" id="btn_logo" onclick="return false"> <div id="animation">
<div id="logo"> </div>
<div id="up"> </div>
<div id="down"> </div>

and then made the animation with:

#btn_logo:active #up


#btn_logo:active #down

How could i make the animation toggled after it ended?

Answer Source

What you should do is have it animate on a CSS class, and then simply add or remove a CSS class on click.

Like so:

(or so with your exact html):

The key here being the animation:

#up, #down {
  background: #000;
  transition: top 0.25s;

#up.moveUp {
  top: 25px;
#down.moveDown {
  top: 100px;

And the relevent JS to add the class:

$('#click').on('click', function(){
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download