153 lines
3.3 KiB
CSS
153 lines
3.3 KiB
CSS
|
|
/* Animations */
|
|
@keyframes fadein {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* Firefox < 16 */
|
|
@-moz-keyframes fadein {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* Safari, Chrome and Opera > 12.1 */
|
|
@-webkit-keyframes fadein {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* Internet Explorer */
|
|
@-ms-keyframes fadein {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes fadeout {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
/* Firefox < 16 */
|
|
@-moz-keyframes fadeout {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
/* Safari, Chrome and Opera > 12.1 */
|
|
@-webkit-keyframes fadeout {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
/* Internet Explorer */
|
|
@-ms-keyframes fadeout {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
@keyframes slideleft {
|
|
from { left: 0; }
|
|
to { left: -100vw; }
|
|
}
|
|
|
|
/* Firefox < 16 */
|
|
@-moz-keyframes slideleft {
|
|
from { left: 0; }
|
|
to { left: -100vw; }
|
|
}
|
|
|
|
/* Safari, Chrome and Opera > 12.1 */
|
|
@-webkit-keyframes slideleft {
|
|
from { left: 0; }
|
|
to { left: -100vw; }
|
|
}
|
|
/* Internet Explorer */
|
|
@-ms-keyframes slideleft {
|
|
from { left: 0; }
|
|
to { left: -100vw; }
|
|
}
|
|
|
|
@keyframes slideright {
|
|
from { left: -30vw; }
|
|
to { left: 0; }
|
|
}
|
|
|
|
/* Firefox < 16 */
|
|
@-moz-keyframes slideright {
|
|
from { left: -30vw; }
|
|
to { left: 0; }
|
|
}
|
|
|
|
/* Safari, Chrome and Opera > 12.1 */
|
|
@-webkit-keyframes slideright {
|
|
from { left: -30vw; }
|
|
to { left: 0; }
|
|
}
|
|
/* Internet Explorer */
|
|
@-ms-keyframes slideright {
|
|
from { left: -30vw; }
|
|
to { left: 0; }
|
|
}
|
|
|
|
@keyframes slideup {
|
|
from { top: -100vh; }
|
|
to { top: 0; }
|
|
}
|
|
|
|
/* Firefox < 16 */
|
|
@-moz-keyframes slideup {
|
|
from { top: -100vh; }
|
|
to { top: 0; }
|
|
}
|
|
|
|
/* Safari, Chrome and Opera > 12.1 */
|
|
@-webkit-keyframes slideup {
|
|
from { top: -100vh; }
|
|
to { top: 0; }
|
|
}
|
|
/* Internet Explorer */
|
|
@-ms-keyframes slideup {
|
|
from { top: -100vh; }
|
|
to { top: 0; }
|
|
}
|
|
|
|
/* Animation helpers */
|
|
.fade-out{
|
|
-webkit-animation: fadeout 0.5s; /* Safari, Chrome and Opera > 12.1 */
|
|
-moz-animation: fadeout 0.5s; /* Firefox < 16 */
|
|
-ms-animation: fadeout 0.5s; /* Internet Explorer */
|
|
-o-animation: fadeout 0.5s; /* Opera < 12.1 */
|
|
animation: fadeout 0.5s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.slide-left{
|
|
-webkit-animation: slideleft 1s; /* Safari, Chrome and Opera > 12.1 */
|
|
-moz-animation: slideleft 1s; /* Firefox < 16 */
|
|
-ms-animation: slideleft 1s; /* Internet Explorer */
|
|
-o-animation: slideleft 1s; /* Opera < 12.1 */
|
|
animation: slideleft 1s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.slide-right{
|
|
-webkit-animation: slideright 1s; /* Safari, Chrome and Opera > 12.1 */
|
|
-moz-animation: slideright 1s; /* Firefox < 16 */
|
|
-ms-animation: slideright 1s; /* Internet Explorer */
|
|
-o-animation: slideright 1s; /* Opera < 12.1 */
|
|
animation: slideright 1s;
|
|
/* animation-fill-mode: forwards; */
|
|
}
|
|
|
|
.slide-up{
|
|
-webkit-animation: slideup 2s; /* Safari, Chrome and Opera > 12.1 */
|
|
-moz-animation: slideup 2s; /* Firefox < 16 */
|
|
-ms-animation: slideup 2s; /* Internet Explorer */
|
|
-o-animation: slideup 2s; /* Opera < 12.1 */
|
|
animation: slideup 2s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
.hidden{
|
|
display:none !important;
|
|
} |