diff --git a/src/modules/esl-animate/core/esl-animate-animations.less b/src/modules/esl-animate/core/esl-animate-animations.less index 24c6786a4..cf49b67f7 100644 --- a/src/modules/esl-animate/core/esl-animate-animations.less +++ b/src/modules/esl-animate/core/esl-animate-animations.less @@ -1,39 +1,47 @@ -.esl-animate-fade { - opacity: 0; - &.in { - opacity: 1; - transition: opacity 1.5s; +@media screen { + .esl-animate-fade { + opacity: 0; + + &.in { + opacity: 1; + transition: opacity 1.5s; + } } -} -.esl-animate-slide { - --esl-animation-offset-x: 0; - --esl-animation-offset-y: 0; + .esl-animate-slide { + --esl-animation-offset-x: 0; + --esl-animation-offset-y: 0; - opacity: 0; - transform: translate3d(var(--esl-animation-offset-x), var(--esl-animation-offset-y), 0); - &.in { - opacity: 1; - transform: translate3d(0, 0, 0); - transition: transform 1s, opacity 1s; - } - &:not(.in) { - position: relative; - top: calc(~'-1 * var(--esl-animation-offset-y)'); - left: calc(~'-1 * var(--esl-animation-offset-x)'); - } + opacity: 0; + transform: translate3d(var(--esl-animation-offset-x), var(--esl-animation-offset-y), 0); - &.up { - --esl-animation-offset-y: 30px; - } - &.down { - --esl-animation-offset-y: -30px; - } - &.left { - --esl-animation-offset-x: 30px; - } - &.right { - --esl-animation-offset-x: -30px; + &.in { + opacity: 1; + transform: translate3d(0, 0, 0); + transition: transform 1s, opacity 1s; + } + + &:not(.in) { + position: relative; + top: calc(~'-1 * var(--esl-animation-offset-y)'); + left: calc(~'-1 * var(--esl-animation-offset-x)'); + } + + &.up { + --esl-animation-offset-y: 30px; + } + + &.down { + --esl-animation-offset-y: -30px; + } + + &.left { + --esl-animation-offset-x: 30px; + } + + &.right { + --esl-animation-offset-x: -30px; + } } }