diff options
Diffstat (limited to 'public/css/icinga/animation.less')
-rw-r--r-- | public/css/icinga/animation.less | 366 |
1 files changed, 366 insertions, 0 deletions
diff --git a/public/css/icinga/animation.less b/public/css/icinga/animation.less new file mode 100644 index 0000000..aad3ffb --- /dev/null +++ b/public/css/icinga/animation.less @@ -0,0 +1,366 @@ +/*! 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; + } +} + +@keyframes pulse { + 0% { + opacity: .5; + transform: scale(1); + } + + 50% { + opacity: 1; + transform: scale(1.2); + } + + 100% { + opacity: .5; + transform: scale(1); + } +} |