88 lines
2.6 KiB
CSS
88 lines
2.6 KiB
CSS
|
main {
|
||
|
|
transition: opacity 400ms ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-down {
|
||
|
|
opacity: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
-webkit-transform: translate(0, -100px);
|
||
|
|
-moz-transform: translate(0, -100px);
|
||
|
|
transform: translate(0, -100px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-down.animated {
|
||
|
|
opacity: 1;
|
||
|
|
visibility: visible;
|
||
|
|
-webkit-backface-visibility: hidden;
|
||
|
|
-moz-backface-visibility: hidden;
|
||
|
|
backface-visibility: hidden;
|
||
|
|
-webkit-transform: translate(0, 0);
|
||
|
|
-moz-transform: translate(0, 0);
|
||
|
|
transform: translate(0, 0);
|
||
|
|
-webkit-transition: all 400ms ease-out 100ms;
|
||
|
|
-moz-transition: all 400ms ease-out 100ms;
|
||
|
|
transition: all 400ms ease-out 100ms;
|
||
|
|
transition: 5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-up {
|
||
|
|
opacity: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
-webkit-transform: translate(0, 100px);
|
||
|
|
-moz-transform: translate(0, 100px);
|
||
|
|
transform: translate(0, 100px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-up.animated {
|
||
|
|
opacity: 1;
|
||
|
|
visibility: visible;
|
||
|
|
-webkit-backface-visibility: hidden;
|
||
|
|
-moz-backface-visibility: hidden;
|
||
|
|
backface-visibility: hidden;
|
||
|
|
-webkit-transform: translate(0, 0);
|
||
|
|
-moz-transform: translate(0, 0);
|
||
|
|
transform: translate(0, 0);
|
||
|
|
-webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
|
||
|
|
-moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
|
||
|
|
transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-right {
|
||
|
|
opacity: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
transform: translate(-100px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-right.animated {
|
||
|
|
opacity: 1;
|
||
|
|
visibility: visible;
|
||
|
|
-webkit-backface-visibility: hidden;
|
||
|
|
-moz-backface-visibility: hidden;
|
||
|
|
backface-visibility: hidden;
|
||
|
|
-webkit-transform: translate(0, 0);
|
||
|
|
-moz-transform: translate(0, 0);
|
||
|
|
transform: translate(0, 0);
|
||
|
|
-webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
|
||
|
|
-moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
|
||
|
|
transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-left {
|
||
|
|
opacity: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
transform: translate(100px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-left.animated {
|
||
|
|
opacity: 1;
|
||
|
|
visibility: visible;
|
||
|
|
-webkit-backface-visibility: hidden;
|
||
|
|
-moz-backface-visibility: hidden;
|
||
|
|
backface-visibility: hidden;
|
||
|
|
-webkit-transform: translate(0, 0);
|
||
|
|
-moz-transform: translate(0, 0);
|
||
|
|
transform: translate(0, 0);
|
||
|
|
-webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
|
||
|
|
-moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
|
||
|
|
transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
|
||
|
|
}
|