CSS3 animation Slide div form right to left Onclick of button

Question

I am trying to slide a div from right to left on-click. And close it, slide it to right again on-click of close button Using CSS3 transition and animation.

Here is the link to fiddle: Click Here

Sample CSS:

.selected {
   animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.dismiss {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}

Can someone explain me what wrong I am doing here? and how to solve it?

Thanks

Answer 1

$('#showFilePanel').click(function(event) {
  if ($('.notification-container').hasClass('dismiss')) {
    $('.notification-container').removeClass('dismiss').addClass('selected').show();
  }
  event.preventDefault();
});

$('#closeFilePanel').click(function(event) {
  if ($('.notification-container').hasClass('selected')) {
    $('.notification-container').removeClass('selected').addClass('dismiss');
  }
  event.preventDefault();
});

html,
body {
  overflow: hidden;
  max-width: 100%
}

.notification-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  display: none;
  height: 100%;
  overflow: hidden;
  background: #107b10;
  z-index: 999;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

.selected {
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

.dismiss {
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}

@-webkit-keyframes slide-in {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(100%);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="notification-container dismiss">
</div>

<a id="showFilePanel">Open</a>
<a id="closeFilePanel">Close</a>

You are using selected and dismiss as a animation-name by mistake, Change your animation-name to real animation name which you did define:

.selected {
   animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.dismiss {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
   0% { -webkit-transform: translateX(-100%); }
   100% { -webkit-transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
     0% {transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}

@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@-webkit-keyframes slide-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-100%); }
}

change (@keyframes dismiss & @keyframes selected) to (@keyframes slide-in and @keyframes slide-out)

Edit: add snippet to open and close from right side.