Анимация появления подсказки

/* Анимация появления подсказки */
.tooltip {
    animation: 0.3s tooltip-animation linear;
}
@keyframes tooltip-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Увеличение аватарки при наведении на меню

/*Увеличение аватарки при наведении на меню*/
.menu-dropdown img {
  transition: transform 1s ease;
}
.menu-dropdown.active img  {
  transform: scale(1.15);
}

Крутой выезд подсказки

/*Крутой выезд подсказки*/
body {
  overflow-x: hidden;
}
.tooltip:not(.tooltip-left):not([style*="display: none;"]) .tooltip-inner {
  animation: tooltip-Initial-D 1s ease-in-out;
}
@keyframes tooltip-Initial-D {
  0% {
    transform: translateX(-1000px);
    pointer-events: none;
  }
  80% {
    transform: translateX(100px);
    pointer-events: none;
  }
  100% {
    transform: translateX(0);
    pointer-events: all;
  }
}
.tooltip-left:not([style*="display: none;"]) .tooltip-inner {
  animation: tooltip-left-Initial-D 1s ease-in-out;
}
@keyframes tooltip-left-Initial-D {
  0% {
    transform: translateX(1000px);
    pointer-events: none;
  }
  80% {
    transform: translateX(-100px);
    pointer-events: none;
  }
  100% {
    transform: translateX(0);
    pointer-events: all;
  }
}