@chatui/core/es/styles/animation.less

The React library for Chatbot UI

@keyframes slideInRight {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-right-item {
  animation: slideInRight 0.5s ease-in-out both;
}

each(range(2, 11), {
  .slide-in-right-item:nth-child(@{value}) {
    animation-delay: ((@value - 1) * 0.1s);
  }
});

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes up {
  from {
    transform: translate3d(0, 20px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

.A-fadeIn,
[data-animation='fadeIn'] {
  animation: 0.6s fadeIn;
}

[data-animation='fadeInUp'] {
  animation: fadeIn 0.6s cubic-bezier(0.17, 0.17, 0.67, 1),
    up 0.6s cubic-bezier(0.02, 0.25, 0.04, 0.98);
}