Marcel Schulz Marcel Schulz - 5 days ago 6
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

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


and then made the animation with:

#btn_logo:active #up


and

#btn_logo:active #down


How could i make the animation toggled after it ended?

Answer

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: https://jsfiddle.net/8troo8bw/1/

(or so with your exact html): https://jsfiddle.net/8troo8bw/2/

The key here being the animation:

#up, #down {
  background: #000;
  position:absolute;
  right:0;
  left:0;
  width:100%;
  height:25px;
  transition: top 0.25s;
}

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

And the relevent JS to add the class:

$('#click').on('click', function(){
  $('#up').addClass('moveUp');
  $('#down').addClass('moveDown');
});
Comments