@eclipse-scout/core/src/style/animations.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
#scout {
  /* args = keyframeName, timingFunction, iterationCount */
  .animation(@args) {
    -webkit-animation: @args;
    -moz-animation: @args;
    -o-animation: @args;
    animation: @args;
  }

  .animation-duration(@duration) {
    -webkit-animation-duration: @duration;
    -moz-animation-duration: @duration;
    -o-animation-duration: @duration;
    animation-duration: @duration;
  }

  .animation-name(@name) {
    -webkit-animation-name: @name;
    -moz-animation-name: @name;
    -o-animation-name: @name;
    animation-name: @name;
  }

  .animation-delay(@delay) {
    -webkit-animation-delay: @delay;
    -moz-animation-delay: @delay;
    -o-animation-delay: @delay;
    animation-delay: @delay;
  }

  .animation-fill-mode(@fillMode) {
    -webkit-animation-fill-mode: @fillMode;
    -moz-animation-fill-mode: @fillMode;
    -o-animation-fill-mode: @fillMode;
    animation-fill-mode: @fillMode;
  }

  .animation-timing-function(@timingFunction) {
    -webkit-animation-timing-function: @timingFunction;
    -moz-animation-timing-function: @timingFunction;
    -o-animation-timing-function: @timingFunction;
    animation-timing-function: @timingFunction;
  }

  .animation-iteration-count(@iterationCount) {
    -webkit-animation-iteration-count: @iterationCount;
    -moz-animation-iteration-count: @iterationCount;
    -o-animation-iteration-count: @iterationCount;
    animation-iteration-count: @iterationCount;
  }

  /*** Fade In ***/

  .keyframes-fade-in() {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @-webkit-keyframes fade-in {
    .keyframes-fade-in()
  }
  @keyframes fade-in {
    .keyframes-fade-in()
  }

  /*** Fade Out ***/

  .keyframes-fade-out() {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @-webkit-keyframes fade-out {
    .keyframes-fade-out();
  }
  @keyframes fade-out {
    .keyframes-fade-out();
  }

  /*** Fade In from current ***/

  .keyframes-fade-in-from-current() {
    to {
      opacity: 1;
    }
  }

  @-webkit-keyframes fade-in-from-current {
    .keyframes-fade-in-from-current()
  }
  @keyframes fade-in-from-current {
    .keyframes-fade-in-from-current()
  }

  /*** Fade Out from current ***/

  .keyframes-fade-out-from-current() {
    to {
      opacity: 0;
    }
  }

  @-webkit-keyframes fade-out-from-current {
    .keyframes-fade-out-from-current();
  }
  @keyframes fade-out-from-current {
    .keyframes-fade-out-from-current();
  }

  /*** Fade with Short Drop ***/

  .keyframes-short-drop() {
    0% {
      #scout.transform(translateY(-40px));
    }
    40% {
      #scout.transform(translateY(7px));
    }
    100% {
      #scout.transform(translateY(0));
    }
  }

  @-webkit-keyframes short-drop {
    .keyframes-short-drop();
  }
  @keyframes short-drop {
    .keyframes-short-drop();
  }

  /*** Fade out and shrink with blur ***/

  .keyframes-fadeout-shrink-blur() {
    from {
      opacity: 1;
      transform: scale(1, 1);
      filter: blur(0);
    }
    to {
      opacity: 0;
      transform: scale(0.5, 0.5);
      filter: blur(10px);
    }
  }

  @-webkit-keyframes fadeout-shrink-blur {
    .keyframes-fadeout-shrink-blur();
  }
  @keyframes fadeout-shrink-blur {
    .keyframes-fadeout-shrink-blur();
  }

  /*** Fade out and shrink ***/

  .keyframes-fadeout-shrink() {
    from {
      opacity: 1;
      transform: scale(1, 1);
    }
    to {
      opacity: 0;
      transform: scale(0, 0);
    }
  }

  @-webkit-keyframes fadeout-shrink {
    .keyframes-fadeout-shrink();
  }
  @keyframes fadeout-shrink {
    .keyframes-fadeout-shrink();
  }

  /*** Fade out and grow with blur ***/

  .keyframes-fadeout-grow-blur() {
    from {
      opacity: 1;
      transform: scale(1, 1);
      filter: blur(0);
    }
    to {
      opacity: 0;
      transform: scale(2, 2);
      filter: blur(10px);
    }
  }

  @-webkit-keyframes fadeout-grow-blur {
    .keyframes-fadeout-grow-blur();
  }
  @keyframes fadeout-grow-blur {
    .keyframes-fadeout-grow-blur();
  }

  /*** Fade out and grow ***/

  .keyframes-fadeout-grow() {
    from {
      opacity: 1;
      transform: scale(1, 1);
    }
    to {
      opacity: 0;
      transform: scale(2, 2);
    }
  }

  @-webkit-keyframes fadeout-grow {
    .keyframes-fadeout-grow();
  }
  @keyframes fadeout-grow {
    .keyframes-fadeout-grow();
  }

  /*** Fade in and grow with blur ***/

  .keyframes-fadein-grow-blur() {
    from {
      opacity: 0;
      transform: scale(0.5, 0.5);
      filter: blur(10px);
    }
    to {
      opacity: 1;
      transform: scale(1, 1);
      filter: blur(0);
    }
  }

  @-webkit-keyframes fadein-grow-blur {
    .keyframes-fadein-grow-blur();
  }
  @keyframes fadein-grow-blur {
    .keyframes-fadein-grow-blur();
  }

  /*** Fade in and grow ***/

  .keyframes-fadein-grow() {
    from {
      opacity: 0;
      transform: scale(0, 0);
    }
    to {
      opacity: 1;
      transform: scale(1, 1);
    }
  }

  @-webkit-keyframes fadein-grow {
    .keyframes-fadein-grow();
  }
  @keyframes fadein-grow {
    .keyframes-fadein-grow();
  }

  /*** Slide In Bottom ***
       Moves the element into screen from bottom up */

  .keyframes-slidein-bottom() {
    0% {
      #scout.transform(translateY(100%));
    }
  }

  @-webkit-keyframes slidein-bottom {
    .keyframes-slidein-bottom();
  }
  @keyframes slidein-bottom {
    .keyframes-slidein-bottom();
  }

  /*** Slide Out Bottom ***
       Moves the element out of bottom screen border */

  .keyframes-slideout-bottom() {
    100% {
      #scout.transform(translateY(100%));
    }
  }

  @-webkit-keyframes slideout-bottom {
    .keyframes-slideout-bottom();
  }
  @keyframes slideout-bottom {
    .keyframes-slideout-bottom();
  }

  /*** Slide Out Right ***
       Moves the element out of right screen border */

  .keyframes-slideout-right() {
    100% {
      #scout.transform(translateX(100%));
    }
  }

  @-webkit-keyframes slideout-right {
    .keyframes-slideout-right();
  }
  @keyframes slideout-right {
    .keyframes-slideout-right();
  }

  /*** Slide Out Left ***
       Moves the element out of left screen border */

  .keyframes-slideout-left() {
    100% {
      #scout.transform(translateX(-100%));
    }
  }

  @-webkit-keyframes slideout-left {
    .keyframes-slideout-left();
  }
  @keyframes slideout-left {
    .keyframes-slideout-left();
  }

  /*** Grow Y ***
    Scales the element along the y axis until 1. Expects the element to be scaled (e.g. scaleY(0)) when the animation starts.
    To create a slide down animation (as known from jQuery) set transform-origin to top. */

  .keyframes-grow-y() {
    100% {
      #scout.transform(scaleY(1));
    }
  }

  @-webkit-keyframes grow-y {
    .keyframes-grow-y();
  }
  @keyframes grow-y {
    .keyframes-grow-y();
  }


  /*** Shrink Y ***
    Shrinks the element along the y axis until 0*/

  .keyframes-shrink-y() {
    100% {
      #scout.transform(scaleY(0));
    }
  }

  @-webkit-keyframes shrink-y {
    .keyframes-shrink-y();
  }
  @keyframes shrink-y {
    .keyframes-shrink-y();
  }

  /*** Fade In Zoom ***/

  .keyframes-fadein-zoom() {
    0% {
      opacity: 0;
      #scout.transform(scale(0.75, 0.75));
    }
    100% {
      opacity: 1;
      #scout.transform(scale(1, 1));
    }
  }

  @-webkit-keyframes fadein-zoom {
    .keyframes-fadein-zoom();
  }
  @keyframes fadein-zoom {
    .keyframes-fadein-zoom();
  }

  /*** Fade In Zoom Bounce ***/

  .keyframes-fadein-zoom-bounce() {
    0% {
      opacity: 0;
      #scout.transform(scale(0.75, 0.75));
    }
    65% {
      opacity: 1;
      #scout.transform(scale(1.02, 1.02));
    }
    100% {
      #scout.transform(scale(1, 1));
    }
  }

  @-webkit-keyframes fadein-zoom-bounce {
    .keyframes-fadein-zoom-bounce();
  }
  @keyframes fadein-zoom-bounce {
    .keyframes-fadein-zoom-bounce();
  }

  /*** Rotation ***/

  .keyframes-rotation () {
    0% {
      #scout.transform(rotate(0deg));
    }
    100% {
      #scout.transform(rotate(359deg));
    }
  }

  @-webkit-keyframes rotation {
    .keyframes-rotation();
  }
  @keyframes rotation {
    .keyframes-rotation();
  }

  /*** Rotation-Reverse ***/

  .keyframes-rotation-reverse () {
    0% {
      #scout.transform(rotate(-0deg));
    }
    100% {
      #scout.transform(rotate(-359deg));
    }
  }

  @-webkit-keyframes rotation-reverse {
    .keyframes-rotation-reverse();
  }
  @keyframes rotation-reverse {
    .keyframes-rotation-reverse();
  }

  /*** Pulse Opacity ***/

  .keyframes-pulse-opacity () {
    0% {
      opacity: 1.0;
    }
    50% {
      opacity: 0.05;
    }
    100% {
      opacity: 1.0;
    }
  }

  @-webkit-keyframes pulse-opacity {
    .keyframes-pulse-opacity();
  }
  @keyframes pulse-opacity {
    .keyframes-pulse-opacity();
  }

  /*** Pulsate ***/

  .keyframes-pulsate () {
    0% {
      #scout.transform(scale(0.25));
      opacity: 0.35;
    }
    45% {
      opacity: 1.0;
    }
    96% {
      #scout.transform(scale(1.2));
      opacity: 0.2;
    }
    100% {
      #scout.transform(scale(1.2));
      opacity: 0.04;
    }
  }

  @-webkit-keyframes pulsate {
    .keyframes-pulsate();
  }
  @keyframes pulsate {
    .keyframes-pulsate();
  }

  /*** Pulsate Reverse ***/

  .keyframes-pulsate-reverse () {
    0% {
      #scout.transform(scale(1.2));
      opacity: 0.0;
    }
    50% {
      opacity: 1.0;
    }
    100% {
      #scout.transform(scale(0.1));
      opacity: 0.0;
    }
  }

  @-webkit-keyframes pulsate-reverse {
    .keyframes-pulsate-reverse();
  }
  @keyframes pulsate-reverse {
    .keyframes-pulsate-reverse();
  }

  /*** Pulsate In-Out ***/

  .keyframes-pulsate-in-out () {
    0% {
      #scout.transform(scale(1));
      opacity: 1.0;
    }
    50% {
      #scout.transform(scale(0.1));
      opacity: 0.01;
    }
    100% {
      #scout.transform(scale(1));
      opacity: 1.0;
    }
  }

  @-webkit-keyframes pulsate-in-out {
    .keyframes-pulsate-in-out();
  }
  @keyframes pulsate-in-out {
    .keyframes-pulsate-in-out();
  }

  /*** Attention ***/

  .keyframes-attention () {
    0% {
      #scout.transform(scale3d(1, 1, 1));
    }
    10% {
      #scout.transform(scale3d(1.1, 1.1, 1.1));
    }
    20% {
      #scout.transform(scale3d(1, 1, 1));
    }
    100% {
      #scout.transform(scale3d(1, 1, 1));
    }
  }

  @-webkit-keyframes attention {
    .keyframes-attention();
  }
  @keyframes attention {
    .keyframes-attention();
  }

  /*** Rotate-X ***/

  .keyframes-rotate-x () {
    0% {
      #scout.transform(perspective(120px) rotateY(0deg));
    }
    50% {
      #scout.transform(perspective(120px) rotateY(-180.0deg));
    }
    100% {
      #scout.transform(perspective(120px) rotateY(-360deg));
    }
  }

  @-webkit-keyframes rotate-x {
    .keyframes-rotate-x();
  }
  @keyframes rotate-x {
    .keyframes-rotate-x();
  }

  /*** Animate Dot ***/

  .keyframes-animate-dot () {
    0% {
      color: @text-color;
      bottom: 0;
    }
    25% {
      color: @palette-gray-5;
      bottom: 4px;
    }
    50% {
      color: @text-color;
      bottom: 0;
    }
    100% {
      color: @text-color;
      bottom: 0;
    }
  }

  @-webkit-keyframes animateDot {
    .keyframes-animate-dot();
  }
  @keyframes animateDot {
    .keyframes-animate-dot();
  }

  /*** Shake ***/

  .animation-shake() {
    #scout.transform-origin(50% 50%);
    #scout.animation-name(shake);
    #scout.animation-duration(0.2s);
    #scout.animation-iteration-count(1);
    #scout.animation-timing-function(linear);
  }

  .keyframes-shake() {
    0% {
      #scout.transform(translate(2px, 1px) rotate(0deg));
    }
    10% {
      #scout.transform(translate(-1px, -2px) rotate(-1deg));
    }
    20% {
      #scout.transform(translate(-3px, 0) rotate(1deg));
    }
    30% {
      #scout.transform(translate(0, 2px) rotate(0deg));
    }
    40% {
      #scout.transform(translate(1px, -1px) rotate(1deg));
    }
    50% {
      #scout.transform(translate(-1px, 2px) rotate(-1deg));
    }
    60% {
      #scout.transform(translate(-3px, 1px) rotate(0deg));
    }
    70% {
      #scout.transform(translate(2px, 1px) rotate(-1deg));
    }
    80% {
      #scout.transform(translate(-1px, -1px) rotate(1deg));
    }
    90% {
      #scout.transform(translate(2px, 2px) rotate(0deg));
    }
    100% {
      #scout.transform(translate(1px, -2px) rotate(-1deg));
    }
  }

  @-webkit-keyframes shake {
    .keyframes-shake();
  }
  @keyframes shake {
    .keyframes-shake();
  }
}

/*** NOP (no operation, may be used to temporarily set css properties while the animation runs, e.g. using a transition) ***/

.keyframes-nop () {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes nop {
  .keyframes-nop();
}

@keyframes nop {
  .keyframes-nop();
}