Pure CSS animation-play-state Door Effect Button

Question

So basically i wanted to create a kind of door effect with a div

Open and Shut when clicking a button.

var buttons = document.querySelectorAll('button');
[].forEach.call(buttons, function(btn) {
  btn.addEventListener('click', function(e) {
    var target = e.target;
    if (target.nodeName.toLowerCase() === 'button') {
      document.getElementById(target.dataset.target + '-div').className = target.textContent === 'stop' ? '' : target.textContent;
    }
      
  });
});

button {
  height: 24px;
  font-size: 16px;
}

div {
  position: relative;
  left: 0;
  margin-left: 0;
  padding-left: 0;
  transform: none;
  margin-top: 10px;
  width: 200px;
  height: 200px;
  border: 0 white solid;
  background-color: green;
}

#transition-div {
  transition: transform 1s ease-in-out;
}

#transition-div.start {
  transform: translateX(400px);
}


@keyframes move-right {
  0% { transform: translateX(0px); }
  50% { transform: translateX(400px); }
  100% { transform: translateX(0px); }
}

<section>
  <h1>Transition</h1>
  <button data-target="transition">start</button>
  <button data-target="transition">stop</button>
  <div id="transition-div"></div>
</section>

Can the top result be created in pure CSS or does javascript have to be implemented into the webpage? And are you able to have a 'start' and 'stop' button merged into one single button? Cheers guys!

Have a look at this thread - http://stackoverflow.com/questions/33347992/reuse-css-animation-in-reversed-direction-by-resetting-the-state/33351228#33351228 You are looking for something very similar (that is, play the reverse animation on second click or click of second button). — Harry, Jun 25 '16 at 10:22
The above comment is based on assumption that you are trying to do it for an "animated" element. If you are just trying to achieve that effect using CSS then it should be possible to do using transitions. — Harry, Jun 25 '16 at 10:28

score 0 · Accepted Answer · answered Jun 25 '16 at 10:49

You can do that using CSS only

div {
  position: relative;
  left: 0;
  margin-left: 0;
  padding-left: 0;
  transform: none;
  margin-top: 10px;
  width: 200px;
  height: 200px;
  border: 0 white solid;
  background-color: green;
}
#transition-div {
  transition: transform 1s ease-in-out;
}
#toggleStartStop { display: none }
#toggleStartStop ~ label[for="toggleStartStop"] {
  padding: 3px 10px;
  background: lightgray;
}

#toggleStartStop:checked ~ #transition-div {
  transform: translateX(400px);
}
#toggleStartStop ~ label[for="toggleStartStop"]:after {
  content: 'Start';
}
#toggleStartStop:checked ~ label[for="toggleStartStop"]:after {
  content: 'Stop';
}

@keyframes move-right {
  0% { transform: translateX(0px); }
  50% { transform: translateX(400px); }
  100% { transform: translateX(0px); }
}

<section>
  <h1>Transition</h1>
  <input id="toggleStartStop" type="checkbox"/>
  <label for="toggleStartStop"></label>
  <div id="transition-div"></div>
</section>

score 0 · Answer 2 · answered Jun 25 '16 at 10:49

If your question is only on how to get the exact same output without using JS (and not necessarily use animation or animation-play-state) then you can do it like in the below snippet. On the other hand if you are trying to get this forward and reverse effect for an animation using CSS, it isn't possible.

Here, an input element and a label (which works as the button) are used. When the label is clicked the input gets checked (based on the for attribute). If the input is checked then the transform gets applied to the element using input:checked ~ #transitiondiv selector. It means select the element which is a sibling of input, has id='transitiondiv' when the input is checked. When label is clicked again, the input gets un-checked, so the element gets toggled back to original state.

To move the input itself to be outside viewing area, a position: absolute with a negative value for left property is used.

input {
  position: absolute;
  left: -100px;
}
label {
  display: inline-block;
  padding: 8px;
  border: 1px solid;
  cursor: pointer;
}
div {
  position: relative;
  left: 0;
  margin-left: 0;
  padding-left: 0;
  transform: none;
  margin-top: 10px;
  width: 200px;
  height: 200px;
  border: 0 white solid;
  background-color: green;
}
#transition-div {
  transition: transform 1s ease-in-out;
}
input:checked ~ #transition-div {
  transform: translateX(400px);
}

<section>
  <input type="checkbox" id="control" />
  <label for="control">Toggle</label>
  <div id="transition-div"></div>
</section>

Thank you for your reply! very useful :) Would never have thought of using a label and a checkbox at the start i was trying to do this using the CSS animation but it seems i was going with it in the wrong way Thank you again! — , Jun 26 '16 at 03:01

Pure CSS animation-play-state Door Effect Button

2 Answers2