/* docara-shell-source: runtime/utility/animation/default/css/default.css */
@layer sf.utilities {
  .animation {
    -webkit-animation-name: sf-animation-fade;
            animation-name: sf-animation-fade;
    -webkit-animation-duration: var(--sf-duration-normal);
            animation-duration: var(--sf-duration-normal);
    -webkit-animation-timing-function: var(--sf-animation);
            animation-timing-function: var(--sf-animation);
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
  }
  .infinite {
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  .animation-from-left {
    -webkit-animation-name: sf-animation-from-left;
            animation-name: sf-animation-from-left;
  }
  .animation-from-right {
    -webkit-animation-name: sf-animation-from-right;
            animation-name: sf-animation-from-right;
  }
  .animation-from-bottom {
    -webkit-animation-name: sf-animation-from-bottom;
            animation-name: sf-animation-from-bottom;
  }
  @-webkit-keyframes sf-animation-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes sf-animation-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @-webkit-keyframes sf-animation-from-left {
    from {
      opacity: 0;
      -webkit-transform: translateX(calc(0rem - var(--sf-b0)));
              transform: translateX(calc(0rem - var(--sf-b0)));
    }
    to {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
  }
  @keyframes sf-animation-from-left {
    from {
      opacity: 0;
      -webkit-transform: translateX(calc(0rem - var(--sf-b0)));
              transform: translateX(calc(0rem - var(--sf-b0)));
    }
    to {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
  }
  @-webkit-keyframes sf-animation-from-right {
    from {
      opacity: 0;
      -webkit-transform: translateX(var(--sf-b0));
              transform: translateX(var(--sf-b0));
    }
    to {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
  }
  @keyframes sf-animation-from-right {
    from {
      opacity: 0;
      -webkit-transform: translateX(var(--sf-b0));
              transform: translateX(var(--sf-b0));
    }
    to {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
  }
  @-webkit-keyframes sf-animation-from-bottom {
    from {
      opacity: 0;
      -webkit-transform: translateY(var(--sf-b0));
              transform: translateY(var(--sf-b0));
    }
    to {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  @keyframes sf-animation-from-bottom {
    from {
      opacity: 0;
      -webkit-transform: translateY(var(--sf-b0));
              transform: translateY(var(--sf-b0));
    }
    to {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
}