css로만 텍스트 애니메이션 부드럽게 주기 슬라이드와함께 효과 (팁)

*그냥 페이드인 효과말고 up down 여러가지 효과는 from {} 부분을 조정하여 가능합니다.

ex)  from {margin-top: 30px ;}

      to{margin-top: 0;}

 

 

 

1. 페이지 로딩시 (반복해서 나타내고 싶다면 animation: mymove 5s infinite; 을 추가해서 시간을 변경해주세요)

 h2{
  opacity: 0;
  }
  
  h5{
  opacity: 0;
  }
  
 h2 {
  animation-name: visualAnimation;
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}

 h5 {
  animation-name: visualAnimation;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes visualAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes visualAnimation {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-o-keyframes visualAnimation {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes visualAnimation {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes visualAnimation2 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-moz-keyframes visualAnimation2 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-o-keyframes visualAnimation2 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes visualAnimation2 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

2. 슬라이드시

h2, h5  앞에 slide가 진행되고 있을 때 active을 붙여준다.

ex) 

.swiper-slide-active .h2{

  animation-name: visualAnimation;
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;

}

 

f12를 눌렀을 때 슬라이드 부분을 보면 active 되고 있는ㄱ ㅔ 보입니다.