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

* {

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.two {

transform: scale(1);

}

#modal-container.two .modal-background {

background: transparent;

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

}

#modal-container.two .modal-background .modal {

opacity: 0;

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

}

#modal-container.two + .content {

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

}

#modal-container.two.out {

animation: quickScaleDown 0s .5s linear forwards;

}

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

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

}

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

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

}

#modal-container.two.out + .content {

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

}

@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;

}

}

@keyframes scaleUp {

0% {

transform: scale(0.8) translateY(1000px);

opacity: 0;

}

100% {

transform: scale(1) translateY(0px);

opacity: 1;

}

}

@keyframes scaleDown {

0% {

transform: scale(1) translateY(0px);

opacity: 1;

}

100% {

transform: scale(0.8) translateY(1000px);

opacity: 0;

}

}

@keyframes scaleBack {

0% {

transform: scale(1);

}

100% {

transform: scale(0.85);

}

}

@keyframes scaleForward {

0% {

transform: scale(0.85);

}

100% {

transform: scale(1);

}

}

@keyframes quickScaleDown {

0% {

transform: scale(1);

}

99.9% {

transform: scale(1);

}

100% {

transform: scale(0);

}

}

سون لرن • آموزش...