zen-desktop/src/browser/base/content/zen-styles/zen-animations.css

@keyframes zen-jello-animation {
  0% {
    transform: scale3d(0.8, 0.8, 0.8);
  }

  60% {
    transform: scale3d(1.02, 1.02, 1.02);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes zen-theme-picker-dot-animation {
  from {
    transform: scale(0.8) translate(-50%, -50%);
  }
  50% {
    transform: scale(1.2) translate(-50%, -50%);
  }
  to {
    transform: scale(1) translate(-50%, -50%);
  }
}

@keyframes zen-main-app-wrapper-animation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes zen-jello-out-animation {
  0% {
    transform: scale3d(1, 1, 1);
  }

  60% {
    transform: scale3d(1.02, 1.02, 1.02);
  }

  99% {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 0.8);
  }

  100% {
    -moz-window-transform: none;
    transform: none;
  }
}

@keyframes zen-slide-in {
  from {
    transform: translateX(-30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes zen-deck-fadeIn {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes better-sidebar-pinned-hide {
  0% {
    opacity: 1;
    transform: scale(1) rotateX(0deg);
  }

  100% {
    transform: scale(0.99) rotateX(-5deg);
    opacity: 0;
  }
}

@keyframes better-sidebar-pinned-show {
  0% {
    opacity: 0;

    transform: scale(0.99) rotateX(-5deg);
  }

  100% {
    transform: scale(1) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes better-sidebar-hide {
  0% {
    opacity: 1;

    transform: scale(1) rotateX(0deg);
  }

  100% {
    transform: scale(0.99) rotateX(-5deg);
    opacity: 0;
  }
}

@keyframes better-sidebar-show {
  0% {
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes better-sidebar-intro-show {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes zen-vtabs-animation {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes zen-sidebar-panel-animation-right {
  0% {
    opacity: 0;
    transform: translateX(10px);
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes zen-sidebar-panel-animation-reverse {
  0% {
    opacity: 1;
    transform: translateX(0) scale3d(1, 1, 1);
  }

  99% {
    opacity: 0;
    transform: translateX(-50px) scale3d(0.95, 0.95, 0.95);
  }

  100% {
    display: none !important;
  }
}

@keyframes zen-workspaces-button-active {
  from {
    bottom: -20px;
  }

  to {
    bottom: -2px;
  }
}

@keyframes zen-workspaces-button-active-collapsed-left {
  from {
    left: -20px;
  }

  to {
    left: -2px;
  }
}

@keyframes zen-workspaces-button-active-collapsed-right {
  from {
    right: -20px;
  }

  to {
    right: -2px;
  }
}

/* Mark: Zen Glance */
@keyframes zen-glance-overlay-animation {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zen-glance-overlay-animation-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes zen-glance-content-animation {
  /* make the box appear from initial width/height and x/y coordinates */
  0% {
    opacity: 1;
  }

  30% {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
  }

  70% {
    /* make the box grow to full width/height */
    opacity: 1;
    transform: translateX(-50%);
    top: -5px;
    left: 50%;
    width: 78%;
    height: 103%;
  }

  100% {
    /* make the box shrink to final width/height and x/y coordinates */
    transform: translateX(-50%);
    opacity: 1;
    width: 75%;
    height: 100%;
    top: -5px;
    left: 50%;
  }
}

@keyframes zen-glance-content-animation-out {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  96% {
    opacity: 1;
  }

  98% {
    /* make the box grow to full width/height */
    opacity: 1;
    transform: translateX(-50%);
    top: -5px;
    left: 50%;
    width: 77%;
    height: 102%;
  }

  100% {
    transform: translateX(-50%);
    opacity: 1;
    width: 75%;
    height: 100%;
    top: -5px;
    left: 50%;
  }
}

@keyframes zen-glance-loading-animation {
  0% {
    opacity: 1;
    width: 80%;
  }

  90% {
    width: 100%; 
  }

  100% {
    opacity: 0;
  }
}

@keyframes zen-glance-buttons-animation {
  from {
    right: 0;
    opacity: 0;
  }

  to {
    opacity: 1;
    transform: translateX(105%);
  }
}