icingaweb2/public/css/icinga/animation.less

349 lines
7.7 KiB
Plaintext

/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
.animate(@animate) {
-moz-animation: @animate;
-o-animation: @animate;
-webkit-animation: @animate;
animation: @animate;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-ms-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-moz-keyframes move-vertical {
0% {
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
}
17% {
-moz-transform: translate(0, 66%);
-o-transform: translate(0, 66%);
-webkit-transform: translate(0, 66%);
transform: translate(0, 66%);
}
33% {
-moz-transform: translate(0, 33%);
-o-transform: translate(0, 33%);
-webkit-transform: translate(0, 33%);
transform: translate(0, 33%);
}
50% {
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
67% {
-moz-transform: translate(0, -33%);
-o-transform: translate(0, -33%);
-webkit-transform: translate(0, -33%);
transform: translate(0, -33%);
}
83% {
-moz-transform: translate(0, -66%);
-o-transform: translate(0, -66%);
-webkit-transform: translate(0, -66%);
transform: translate(0, -66%);
}
100% {
-moz-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
}
@-webkit-keyframes move-vertical {
0% {
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
}
17% {
-moz-transform: translate(0, 66%);
-o-transform: translate(0, 66%);
-webkit-transform: translate(0, 66%);
transform: translate(0, 66%);
}
33% {
-moz-transform: translate(0, 33%);
-o-transform: translate(0, 33%);
-webkit-transform: translate(0, 33%);
transform: translate(0, 33%);
}
50% {
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
67% {
-moz-transform: translate(0, -33%);
-o-transform: translate(0, -33%);
-webkit-transform: translate(0, -33%);
transform: translate(0, -33%);
}
83% {
-moz-transform: translate(0, -66%);
-o-transform: translate(0, -66%);
-webkit-transform: translate(0, -66%);
transform: translate(0, -66%);
}
100% {
-moz-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
}
@-o-keyframes move-vertical {
0% {
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
}
17% {
-moz-transform: translate(0, 66%);
-o-transform: translate(0, 66%);
-webkit-transform: translate(0, 66%);
transform: translate(0, 66%);
}
33% {
-moz-transform: translate(0, 33%);
-o-transform: translate(0, 33%);
-webkit-transform: translate(0, 33%);
transform: translate(0, 33%);
}
50% {
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
67% {
-moz-transform: translate(0, -33%);
-o-transform: translate(0, -33%);
-webkit-transform: translate(0, -33%);
transform: translate(0, -33%);
}
83% {
-moz-transform: translate(0, -66%);
-o-transform: translate(0, -66%);
-webkit-transform: translate(0, -66%);
transform: translate(0, -66%);
}
100% {
-moz-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
}
@-ms-keyframes move-vertical {
0% {
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
}
17% {
-moz-transform: translate(0, 66%);
-o-transform: translate(0, 66%);
-webkit-transform: translate(0, 66%);
transform: translate(0, 66%);
}
33% {
-moz-transform: translate(0, 33%);
-o-transform: translate(0, 33%);
-webkit-transform: translate(0, 33%);
transform: translate(0, 33%);
}
50% {
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
67% {
-moz-transform: translate(0, -33%);
-o-transform: translate(0, -33%);
-webkit-transform: translate(0, -33%);
transform: translate(0, -33%);
}
83% {
-moz-transform: translate(0, -66%);
-o-transform: translate(0, -66%);
-webkit-transform: translate(0, -66%);
transform: translate(0, -66%);
}
100% {
-moz-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
}
@keyframes move-vertical {
0% {
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
}
17% {
-moz-transform: translate(0, 66%);
-o-transform: translate(0, 66%);
-webkit-transform: translate(0, 66%);
transform: translate(0, 66%);
}
33% {
-moz-transform: translate(0, 33%);
-o-transform: translate(0, 33%);
-webkit-transform: translate(0, 33%);
transform: translate(0, 33%);
}
50% {
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
67% {
-moz-transform: translate(0, -33%);
-o-transform: translate(0, -33%);
-webkit-transform: translate(0, -33%);
transform: translate(0, -33%);
}
83% {
-moz-transform: translate(0, -66%);
-o-transform: translate(0, -66%);
-webkit-transform: translate(0, -66%);
transform: translate(0, -66%);
}
100% {
-moz-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
}
@keyframes blink {
0% {
opacity: 0.2;
}
20% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}