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

* {

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

transform: scaleY(0.01) scaleX(0);

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

}

#modal-container.one .modal-background .modal {

transform: scale(0);

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

}

#modal-container.one.out {

transform: scale(1);

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

}

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

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

}

@keyframes unfoldIn {

0% {

transform: scaleY(0.005) scaleX(0);

}

50% {

transform: scaleY(0.005) scaleX(1);

}

100% {

transform: scaleY(1) scaleX(1);

}

}

@keyframes unfoldOut {

0% {

transform: scaleY(1) scaleX(1);

}

50% {

transform: scaleY(0.005) scaleX(1);

}

100% {

transform: scaleY(0.005) scaleX(0);

}

}

@keyframes zoomIn {

0% {

transform: scale(0);

}

100% {

transform: scale(1);

}

}

@keyframes zoomOut {

0% {

transform: scale(1);

}

100% {

transform: scale(0);

}

}

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