애니메이션으로 텍스트가 순서대로 올라오는 효과내기

h2 {
  font-size: 1.786em;
  transform:translateY(100px); 
  opacity: 0;
  animation: ani-txt 1s forwards;
}
p {
  font-size: 1em;
  transform:translateY(100px); 
  opacity: 0;
  animation: ani-txt 1s forwards;
}
@keyframes ani-txt {
  0% {transform:translateY(100px); opacity: 0;}
  100% {transform:translateY(0px); opacity: 1;}
}

아티클 안의 글자들이 밑에서 위로 나타나는 효과를 내기위해

animation을 이용하여 설정한 후 @keyframes 애니매이션이름 {} 으로 원하는 효과를 지정해줍니다.

 

&:nth-child(3) {
  background: rgba($bg, 0.9);
  &::before {
	  display: none;
      }
  h2,p {
      animation-delay: 0.5s;
      }
}
&:nth-child(4) {
  background: rgba($bg, 0.9);
  &::before {
	  display: none;
      }
  h2,p {
      animation-delay: 1s;
      }
}

해당 아티클에 원하는 딜레이 시간을 작성합니다.