I am currently working on a side panel that needs to slide in and out when a button is clicked, and I want to achieve this using pure CSS.
However, I'm struggling to make the transition smooth. I've experimented with keyframes but haven't been able to achieve the desired result.
You can find my code on jsFiddle.
Below is the CSS code I've been working 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%;}
}