You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
637 lines
12 KiB
CSS
637 lines
12 KiB
CSS
3 years ago
|
.dw-trans .dw-persp {
|
||
|
overflow: hidden;
|
||
|
perspective: 1000;
|
||
|
-webkit-perspective: 1000;
|
||
|
-moz-perspective: 1000;
|
||
|
}
|
||
|
.dw-trans .dwwb {
|
||
|
-webkit-backface-visibility: hidden;
|
||
|
}
|
||
|
.dw-in {
|
||
|
animation-timing-function: ease-out;
|
||
|
animation-duration: 350ms;
|
||
|
-webkit-animation-timing-function: ease-out;
|
||
|
-webkit-animation-duration: 350ms;
|
||
|
-moz-animation-timing-function: ease-out;
|
||
|
-moz-animation-duration: 350ms;
|
||
|
}
|
||
|
.dw-out {
|
||
|
animation-timing-function: ease-in;
|
||
|
animation-duration: 350ms;
|
||
|
-webkit-animation-timing-function: ease-in;
|
||
|
-webkit-animation-duration: 350ms;
|
||
|
-moz-animation-timing-function: ease-in;
|
||
|
-moz-animation-duration: 350ms;
|
||
|
}
|
||
|
.dw-flip,
|
||
|
.dw-swing,
|
||
|
.dw-slidehorizontal,
|
||
|
.dw-slidevertical,
|
||
|
.dw-slidedown,
|
||
|
.dw-slideup,
|
||
|
.dw-fade {
|
||
|
backface-visibility: hidden;
|
||
|
transform: translateX(0);
|
||
|
-webkit-backface-visibility: hidden;
|
||
|
-webkit-transform: translateX(0);
|
||
|
-moz-backface-visibility: hidden;
|
||
|
-moz-transform: translateX(0);
|
||
|
}
|
||
|
.dw-swing,
|
||
|
.dw-slidehorizontal,
|
||
|
.dw-slidevertical,
|
||
|
.dw-slidedown,
|
||
|
.dw-slideup,
|
||
|
.dw-fade {
|
||
|
transform-origin: 0 0;
|
||
|
-webkit-transform-origin: 0 0;
|
||
|
-moz-transform-origin: 0 0;
|
||
|
}
|
||
|
.dw-flip,
|
||
|
.dw-pop {
|
||
|
transform-origin: 50% 50%;
|
||
|
-webkit-transform-origin: 50% 50%;
|
||
|
-moz-transform-origin: 50% 50%;
|
||
|
}
|
||
|
.dw-pop.dw-in {
|
||
|
opacity: 1;
|
||
|
transform: scale(1);
|
||
|
animation-name: dw-p-in;
|
||
|
-webkit-animation-name: dw-p-in;
|
||
|
-webkit-transform: scale(1);
|
||
|
-moz-animation-name: dw-p-in;
|
||
|
-moz-transform: scale(1);
|
||
|
}
|
||
|
.dw-pop.dw-out {
|
||
|
opacity: 0;
|
||
|
animation-name: dw-p-out;
|
||
|
-webkit-animation-name: dw-p-out;
|
||
|
-moz-animation-name: dw-p-out;
|
||
|
}
|
||
|
.dw-flip.dw-in {
|
||
|
opacity: 1;
|
||
|
transform: scale(1);
|
||
|
animation-name: dw-fl-in;
|
||
|
-webkit-animation-name: dw-fl-in;
|
||
|
-webkit-transform: scale(1);
|
||
|
-moz-animation-name: dw-fl-in;
|
||
|
-moz-transform: scale(1);
|
||
|
}
|
||
|
.dw-flip.dw-out {
|
||
|
opacity: 0;
|
||
|
animation-name: dw-fl-out;
|
||
|
-webkit-animation-name: dw-fl-out;
|
||
|
-moz-animation-name: dw-fl-out;
|
||
|
}
|
||
|
.dw-swing.dw-in {
|
||
|
opacity: 1;
|
||
|
transform: scale(1);
|
||
|
animation-name: dw-sw-in;
|
||
|
-webkit-animation-name: dw-sw-in;
|
||
|
-webkit-transform: scale(1);
|
||
|
-moz-animation-name: dw-sw-in;
|
||
|
-moz-transform: scale(1);
|
||
|
}
|
||
|
.dw-swing.dw-out {
|
||
|
opacity: 0;
|
||
|
animation-name: dw-sw-out;
|
||
|
-webkit-animation-name: dw-sw-out;
|
||
|
-moz-animation-name: dw-sw-out;
|
||
|
}
|
||
|
.dw-slidehorizontal.dw-in {
|
||
|
opacity: 1;
|
||
|
transform: scale(1);
|
||
|
animation-name: dw-sh-in;
|
||
|
-webkit-animation-name: dw-sh-in;
|
||
|
-webkit-transform: scale(1);
|
||
|
-moz-animation-name: dw-sh-in;
|
||
|
-moz-transform: scale(1);
|
||
|
}
|
||
|
.dw-slidehorizontal.dw-out {
|
||
|
opacity: 0;
|
||
|
animation-name: dw-sh-out;
|
||
|
-webkit-animation-name: dw-sh-out;
|
||
|
-moz-animation-name: dw-sh-out;
|
||
|
}
|
||
|
.dw-slidevertical.dw-in {
|
||
|
opacity: 1;
|
||
|
animation-name: dw-dw-sv-in;
|
||
|
transform: scale(1);
|
||
|
-webkit-animation-name: dw-dw-sv-in;
|
||
|
-webkit-transform: scale(1);
|
||
|
-moz-animation-name: dw-dw-sv-in;
|
||
|
-moz-transform: scale(1);
|
||
|
}
|
||
|
.dw-slidevertical.dw-out {
|
||
|
opacity: 0;
|
||
|
animation-name: dw-sv-out;
|
||
|
-webkit-animation-name: dw-sv-out;
|
||
|
-moz-animation-name: dw-sv-out;
|
||
|
}
|
||
|
.dw-slidedown.dw-in {
|
||
|
animation-name: dw-sd-in;
|
||
|
transform: scale(1);
|
||
|
-webkit-animation-name: dw-sd-in;
|
||
|
-webkit-transform: scale(1);
|
||
|
-moz-animation-name: dw-sd-in;
|
||
|
-moz-transform: scale(1);
|
||
|
}
|
||
|
.dw-slidedown.dw-out {
|
||
|
animation-name: dw-sd-out;
|
||
|
-webkit-animation-name: dw-sd-out;
|
||
|
-moz-animation-name: dw-sd-out;
|
||
|
}
|
||
|
.dw-slideup.dw-in {
|
||
|
transform: scale(1);
|
||
|
animation-name: dw-su-in;
|
||
|
-webkit-animation-name: dw-su-in;
|
||
|
-webkit-transform: scale(1);
|
||
|
-moz-animation-name: dw-su-in;
|
||
|
-moz-transform: scale(1);
|
||
|
}
|
||
|
.dw-slideup.dw-out {
|
||
|
animation-name: dw-su-out;
|
||
|
-webkit-animation-name: dw-su-out;
|
||
|
-moz-animation-name: dw-su-out;
|
||
|
}
|
||
|
.dw-fade.dw-in {
|
||
|
opacity: 1;
|
||
|
animation-name: dw-f-in;
|
||
|
-webkit-animation-name: dw-f-in;
|
||
|
-moz-animation-name: dw-f-in;
|
||
|
}
|
||
|
.dw-fade.dw-out {
|
||
|
opacity: 0;
|
||
|
animation-name: dw-f-out;
|
||
|
-webkit-animation-name: dw-f-out;
|
||
|
-moz-animation-name: dw-f-out;
|
||
|
}
|
||
|
/* Fade in */
|
||
|
@keyframes dw-f-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-f-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-f-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
/* Fade out */
|
||
|
@keyframes dw-f-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-f-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-f-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
/* Pop in */
|
||
|
@keyframes dw-p-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
transform: scale(0.8);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
transform: scale(1);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-p-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: scale(0.8);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: scale(1);
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-p-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
-moz-transform: scale(0.8);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
-moz-transform: scale(1);
|
||
|
}
|
||
|
}
|
||
|
/* Pop out */
|
||
|
@keyframes dw-p-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
transform: scale(1);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
transform: scale(0.8);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-p-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: scale(1);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: scale(0.8);
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-p-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
-moz-transform: scale(1);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
-moz-transform: scale(0.8);
|
||
|
}
|
||
|
}
|
||
|
/* Flip in */
|
||
|
@keyframes dw-fl-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
transform: rotateY(90deg);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
transform: rotateY(0);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-fl-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: rotateY(90deg);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: rotateY(0);
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-fl-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
-moz-transform: rotateY(90deg);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
-moz-transform: rotateY(0);
|
||
|
}
|
||
|
}
|
||
|
/* Flip out */
|
||
|
@keyframes dw-fl-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
transform: rotateY(0deg);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
transform: rotateY(-90deg);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-fl-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: rotateY(0deg);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: rotateY(-90deg);
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-fl-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
-moz-transform: rotateY(0deg);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
-moz-transform: rotateY(-90deg);
|
||
|
}
|
||
|
}
|
||
|
/* Swing in */
|
||
|
@keyframes dw-sw-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
transform: rotateY(-90deg);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
transform: rotateY(0deg);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-sw-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: rotateY(-90deg);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: rotateY(0deg);
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-sw-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
-moz-transform: rotateY(-90deg);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
-moz-transform: rotateY(0deg);
|
||
|
}
|
||
|
}
|
||
|
/* Swing out */
|
||
|
@keyframes dw-sw-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
transform: rotateY(0deg);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
transform: rotateY(-90deg);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-sw-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: rotateY(0deg);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: rotateY(-90deg);
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-sw-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
-moz-transform: rotateY(0deg);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
-moz-transform: rotateY(-90deg);
|
||
|
}
|
||
|
}
|
||
|
/* Slide horizontal in */
|
||
|
@keyframes dw-sh-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
transform: translateX(-100%);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
transform: translateX(0);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-sh-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translateX(-100%);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: translateX(0);
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-sh-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
-moz-transform: translateX(-100%);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
-moz-transform: translateX(0);
|
||
|
}
|
||
|
}
|
||
|
/* Slide horizontal out */
|
||
|
@keyframes dw-sh-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
transform: translateX(0);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
transform: translateX(100%);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-sh-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: translateX(0);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translateX(100%);
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-sh-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
-moz-transform: translateX(0);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
-moz-transform: translateX(100%);
|
||
|
}
|
||
|
}
|
||
|
/* Slide vertical in */
|
||
|
@keyframes dw-dw-sv-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
transform: translateY(-100%);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
transform: translateY(0);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-dw-sv-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translateY(-100%);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: translateY(0);
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-dw-sv-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
-moz-transform: translateY(-100%);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
-moz-transform: translateY(0);
|
||
|
}
|
||
|
}
|
||
|
/* Slide vertical out */
|
||
|
@keyframes dw-sv-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
transform: translateY(0);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
transform: translateY(100%);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-sv-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: translateY(0);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translateY(100%);
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-sv-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
-moz-transform: translateY(0);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
-moz-transform: translateY(100%);
|
||
|
}
|
||
|
}
|
||
|
/* Slide Down In */
|
||
|
@keyframes dw-sd-in {
|
||
|
from {
|
||
|
transform: translateY(-100%);
|
||
|
}
|
||
|
to {
|
||
|
transform: translateY(0);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-sd-in {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: translateY(-100%);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: translateY(0);
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-sd-in {
|
||
|
from {
|
||
|
-moz-transform: translateY(-100%);
|
||
|
}
|
||
|
to {
|
||
|
-moz-transform: translateY(0);
|
||
|
}
|
||
|
}
|
||
|
/* Slide down out */
|
||
|
@keyframes dw-sd-out {
|
||
|
from {
|
||
|
transform: translateY(0);
|
||
|
}
|
||
|
to {
|
||
|
transform: translateY(-100%);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-sd-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: translateY(0);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: translateY(-100%);
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-sd-out {
|
||
|
from {
|
||
|
-moz-transform: translateY(0);
|
||
|
}
|
||
|
to {
|
||
|
-moz-transform: translateY(-100%);
|
||
|
}
|
||
|
}
|
||
|
/* Slide Up In */
|
||
|
@keyframes dw-su-in {
|
||
|
from {
|
||
|
transform: translateY(100%);
|
||
|
}
|
||
|
to {
|
||
|
transform: translateY(0);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-su-in {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: translateY(100%);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: translateY(0);
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-su-in {
|
||
|
from {
|
||
|
-moz-transform: translateY(100%);
|
||
|
}
|
||
|
to {
|
||
|
-moz-transform: translateY(0);
|
||
|
}
|
||
|
}
|
||
|
/* Slide up out */
|
||
|
@keyframes dw-su-out {
|
||
|
from {
|
||
|
transform: translateY(0);
|
||
|
}
|
||
|
to {
|
||
|
transform: translateY(100%);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes dw-su-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: translateY(0);
|
||
|
}
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: translateY(100%);
|
||
|
}
|
||
|
}
|
||
|
@-moz-keyframes dw-su-out {
|
||
|
from {
|
||
|
-moz-transform: translateY(0);
|
||
|
}
|
||
|
to {
|
||
|
-moz-transform: translateY(100%);
|
||
|
}
|
||
|
}
|