Sliding text with CSS3 animation / transition

I wanted to know how to make this kind of animation: https://dimes.io/

I am trying to figure out how they did this headings and paragraph animation. However, I did some research “under the hood” and found those css snippets

  .ani-1s-200ms {
  -webkit-transition: all 1000ms 200ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 1000ms 200ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1000ms 200ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ani-1s-400ms {
  -webkit-transition: all 1000ms 400ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 1000ms 400ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1000ms 400ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ani-1s-600ms {
  -webkit-transition: all 1000ms 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 1000ms 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1000ms 600ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ani-1s-800ms {
  -webkit-transition: all 1000ms 800ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 1000ms 800ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1000ms 800ms cubic-bezier(0.19, 1, 0.22, 1);
}

When I try to add similar or the same css and apply those classes to my element the animation is not made. Does anyone know why is this happening?


Source: css3

Leave a Reply