Sliding Box In when selecting sibling element with CSS Animation

Question

First off, I know how to do this with JQuery. Now that that is out of the way let me explain. All I am doing is a simple knowledge practice for CSS. What I am trying to do is do all actions with CSS with as little javascript as possible, even if it makes the job harder. I am trying to make it so that when you click and hold on the title that first appears, the slide in box will slide in. I have made sure the animations work on load correctly. I am certain it has to do with the selector that I am using;

.fade-in:active ~ .side-box

Included is the entire self written (and I guess self-inflicted) exercise. No this is NOT homework. This is because I am bored at work and actually find this kind of thing fun!

body {
  background-color: #000000;
  color: #ccc;
  font-family: verdana;
}
.fade-in {
  position: relative;
  animation: fadein 0.5s ease-out 0s 1 forwards;
}

.fade-in:active {
  animation: slideTitleRight 0.5s ease-out 0s 1 forwards;
}

.fade-in::selection {
  background: none;
}

.fade-in:active~.side-box {
  animation: slideright 0.5s ease-out 0s 1 forwards;
}

.side-box {
  background-color: #35587d;
  width: 300px;
  height: 100vh;
  position: absolute;
  left: -300px;
}

.side-box {
  color: #fff;
}

@keyframes fadein {
  0% {
    position: absolute;
    top: -10px;
    opacity: 0;
  }
  100% {
    position: absolute;
    top: 0;
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideright {
  0% {
    position: absolute;
    left: -300px;
  }
  100% {
    position: absolute;
    left: 0;
  }
}

@keyframes slideTitleRight {
  0% {
    position: absolute;
    left: 0;
  }
  100% {
    position: absolute;
    transform: translateX(300px);
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<body>
  <div class="side-box">
    <div class="container">
      <h2>Welcome</h2>
    </div>
  </div>
  <h1 class="fade-in">Hi there</h1>

  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

score 1 · Accepted Answer · answered Feb 11 '18 at 01:13

The ~ selects general siblings that FOLLOW in the dom.

What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

See updated snippet below

body {
  background-color: #000000;
  color: #ccc;
  font-family: verdana;
}
.fade-in {
  position: relative;
  animation: fadein 0.5s ease-out 0s 1 forwards;
}

.fade-in:active {
  animation: slideTitleRight 0.5s ease-out 0s 1 forwards;
}

.fade-in::selection {
  background: none;
}

.fade-in:active~.side-box {
  animation: slideright 0.5s ease-out 0s 1 forwards;
}

.side-box {
  background-color: #35587d;
  width: 300px;
  height: 100vh;
  position: absolute;
  left: -300px;
}

.side-box {
  color: #fff;
}

@keyframes fadein {
  0% {
    position: absolute;
    top: -10px;
    opacity: 0;
  }
  100% {
    position: absolute;
    top: 0;
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideright {
  0% {
    position: absolute;
    left: -300px;
  }
  100% {
    position: absolute;
    left: 0;
  }
}

@keyframes slideTitleRight {
  0% {
    position: absolute;
    left: 0;
  }
  100% {
    position: absolute;
    transform: translateX(300px);
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<body>
  <h1 class="fade-in">Hi there</h1>
  <div class="side-box">
    <div class="container">
      <h2>Welcome</h2>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

Took me a second to see what you changed, but I got it. To clarify for everybody else, switching the h1 to BEFORE the affected DIV helped change this. — Tyler Lazenby, Feb 11 '18 at 01:19

Sliding Box In when selecting sibling element with CSS Animation

1 Answers1