.motto li {
      position: relative;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .motto li img {

    }

    .motto li::after {
      content: attr(id);
      position: absolute;
 
      right: 100%;
      transform: translateX(100%);
      opacity: 0;
      white-space: nowrap;
      color: #333;
      font-size: 18px;
      transition: transform 0.6s ease, opacity 0.6s ease;
    }

    .motto li.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .motto li.visible::after {
      transform: translateX(0%);
      opacity: 1;
    }