استایل زیبا برای لایت باکس - Modal Animation (نمونه 5) : باز شدن سریع از چپ به راست

* {

  box-sizing: border-box;

  padding: 0;

  margin: 0;

}

html, body {

  min-height: 100%;

  height: 100%;

  background-image: url(http://theartmad.com/wp-content/uploads/Dark-Grey-Texture-Wallpaper-5.jpg);

  background-size: cover;

  background-position: top center;

  font-family: helvetica neue, helvetica, arial, sans-serif;

  font-weight: 200;

}

html.modal-active, body.modal-active {

  overflow: hidden;

}

.button {

  display: inline-block;

  text-align: center;

  padding: 10px 15px;

  margin: 10px;

  background: red;

  font-size: 18px;

  background-color: #efefef;

  border-radius: 3px;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

  cursor: pointer;

}

.button:hover {

  color: white;

  background: #009bd5;

}

#modal-container {

  position: fixed;

  display: table;

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  transform: scale(0);

  z-index: 1;

}

#modal-container .modal-background {

  display: table-cell;

  background: rgba(0, 0, 0, 0.8);

  text-align: center;

  vertical-align: middle;

}

#modal-container .modal-background .modal {

  background: white;

  padding: 50px;

  display: inline-block;

  border-radius: 3px;

  font-weight: 300;

  position: relative;

}

#modal-container .modal-background .modal h2 {

  font-size: 25px;

  line-height: 25px;

  margin-bottom: 15px;

}

#modal-container .modal-background .modal p {

  font-size: 18px;

  line-height: 22px;

}

#modal-container .modal-background .modal .modal-svg {

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  border-radius: 3px;

}

#modal-container .modal-background .modal .modal-svg rect {

  stroke: #fff;

  stroke-width: 2px;

  stroke-dasharray: 778;

  stroke-dashoffset: 778;

}

#modal-container.five {

  transform: scale(1);

}

#modal-container.five .modal-background {

  background: transparent;

  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

#modal-container.five .modal-background .modal {

  transform: translateX(-1500px);

  animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

#modal-container.five.out {

  animation: quickScaleDown 0s .5s linear forwards;

}

#modal-container.five.out .modal-background {

  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

#modal-container.five.out .modal-background .modal {

  animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

@keyframes roadRunnerIn {

  0% {

    transform: translateX(-1500px) skewX(30deg) scaleX(1.3);

  }

  70% {

    transform: translateX(30px) skewX(0deg) scaleX(0.9);

  }

  100% {

    transform: translateX(0px) skewX(0deg) scaleX(1);

  }

}

@keyframes roadRunnerOut {

  0% {

    transform: translateX(0px) skewX(0deg) scaleX(1);

  }

  30% {

    transform: translateX(-30px) skewX(-5deg) scaleX(0.9);

  }

  100% {

    transform: translateX(1500px) skewX(30deg) scaleX(1.3);

  }

}

@keyframes fadeIn {

  0% {

    background: transparent;

  }

  100% {

    background: rgba(0, 0, 0, 0.7);

  }

}

@keyframes fadeOut {

  0% {

    background: rgba(0, 0, 0, 0.7);

  }

  100% {

    background: transparent;

  }

}