אנימציית כותרת כניסה מצד ימין + פיידאין

פייד אין

.title-primary {
  position: absolute;
  top: 8.5rem;
  opacity: 0;
  animation-name: rightFadeInOut;
  animation-delay: 1s;
  animation-duration: 3s;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}

@keyframes rightFadeInOut {
  0% {
    position: absolute;
    right: -3rem;
    opacity: 0;
  }

  75% {
    position: absolute;
    right: 10rem;
  }

  100% {
    opacity: 1;
    right: 10rem;
  }
}

.title-primary {
  position: absolute;
  top: 8.5rem;
  opacity: 0;
  animation-name: rightFadeInOut;
  animation-delay: 1s;
  animation-duration: 3s;
}

@keyframes rightFadeInOut {
  0% {
    position: absolute;
    right: -3rem;
    opacity: 0;
  }

  75% {
    position: absolute;
    right: 10rem;
  }

  100% {
    opacity: 1;
    right: 10rem;
  }
}

פייד אין פייד אאוט

עוד דוגמאות