Angular slidein and slideout with ngif and css animation - css

Question

I need a side panel that slides in and slides out if the button is clicked. I am trying to write it in pure css.
How can achieve the transition smooth. I tried keyframes and i am not getting the desired result.
Here is my jsFiddle link
Here is my css i played with
.showFlyoutPanel.ng-enter, .showFlyoutPanel.ng-leave {
}
.showFlyoutPanel.ng-enter,
.showFlyoutPanel.ng-leave.ng-leave-active {
-webkit-animation-name: slideOut; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-name: slideOut;
animation-duration: 4s;
animation-direction: reverse;
}
.showFlyoutPanel.ng-leave,
.showFlyoutPanel.ng-enter.ng-enter-active {
-webkit-animation-name: slideIn; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-direction: forwards; /* Chrome, Safari, Opera */
animation-name: slideIn;
animation-duration: 4s;
animation-direction: forwards;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes slideIn {
0% {right:-100px;}
25% {right:-75px;}
50% {right:-50px;}
75% {right:-25px;}
100% {right:0;opacity: 1;}
}
/* Standard syntax */
#keyframes slideIn {
0% {right:-100px;}
25% {right:-75px;}
50% {right:-50px;}
75% {right:-25px;}
100% {right:0;opacity: 1;}
}
/* Chrome, Safari, Opera */
#-webkit-keyframes slideOut {
0% {right:0px;}
25% {right:25%;}
50% {right:50%;}
75% {right:75%;}
100% {right:100%;}
}
/* Standard syntax */
#keyframes slideOut {
0% {right:0px;}
25% {right:25%;}
50% {right:50%;}
75% {right:75%;}
100% {right:100%;}
}

Answer 1

I got the answer with this set of codes. But want to make sure whether the code set is correct. And what is the use of
.showFlyoutPanel.ng-enter, .showFlyoutPanel.ng-leave { }
.showFlyoutPanel.ng-enter, .showFlyoutPanel.ng-leave {
}
.showFlyoutPanel.ng-enter,
.showFlyoutPanel.ng-leave.ng-leave-active {
-webkit-animation-timing-function: ease-in-out;
-webkit-animation: slideOut 5s; /* Chrome, Safari, Opera */
animation: slideOut 5s ;
}
.showFlyoutPanel.ng-leave,
.showFlyoutPanel.ng-enter.ng-enter-active {
-webkit-animation: slideIn 5s; /* Chrome, Safari, Opera */
animation: slideIn 5s ;
-webkit-animation-timing-function: ease-in-out;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes slideIn {
from {left: 100%;}
to {left: 0px;}
}
/* Standard syntax */
#keyframes slideIn {
from {left: 100%;}
to {left: 0px;}
}
/* Chrome, Safari, Opera */
#-webkit-keyframes slideOut {
from {left: 0px;}
to {left: 100%;}
}
/* Standard syntax */
#keyframes slideOut {
from {left: 0px;}
to {left: 100%;}
}