DEV Community

Deepak Devanand
Deepak Devanand

Posted on

CSS Subtle Slideup Reveal Animation

Within the document, there are sections that if animated just a bit, could enhance the overall visual appeal of the design. One such animation is a simple, slide-up reveal that guides the user's attention unobtrusively.

.reveal {
  animation: 1.5s revealup ease infinite;
}

@keyframes revealup {
  from {
    opacity: 0;
    transform: translatey(-15%);
  }

  to {
    opacity: 1;
    transform: translatey(-25%);
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)