animate.css aos 에니메이션 효과주기

*****레이어팝업

밑에서 위로 올라오는 css로 일반적으로 줄때

#밑 (안보일때)

transform: translateY(100%);

#위 (보일때 - 클래스 붙음)

transform: translateY(0);

 

 

 

1. animate.css 오직 css만으로 가능 동작은 화면 보일때 한번만

https://animate.style/

Animate.css | A cross-browser library of CSS animations.

----------

디레이 (1초부터  5초까지만있고  나머진 패스트 슬로우로 구분되어있음)

.animate__animated.animate__delay-1s {

  -webkit-animation-delay: 1s;

  animation-delay: 1s;

  -webkit-animation-delay: var(--animate-delay);

  animation-delay: var(--animate-delay)

}

.animate__animated.animate__delay-2s {

  -webkit-animation-delay: 2s;

  animation-delay: 2s;

  -webkit-animation-delay: calc(var(--animate-delay)*2);

  animation-delay: calc(var(--animate-delay)*2)

}

.animate__animated.animate__delay-3s {

  -webkit-animation-delay: 3s;

  animation-delay: 3s;

  -webkit-animation-delay: calc(var(--animate-delay)*3);

  animation-delay: calc(var(--animate-delay)*3)

}

.animate__animated.animate__delay-4s {

  -webkit-animation-delay: 4s;

  animation-delay: 4s;

  -webkit-animation-delay: calc(var(--animate-delay)*4);

  animation-delay: calc(var(--animate-delay)*4)

}

.animate__animated.animate__delay-5s {

  -webkit-animation-delay: 5s;

  animation-delay: 5s;

  -webkit-animation-delay: calc(var(--animate-delay)*5);

  animation-delay: calc(var(--animate-delay)*5)

}

 

 

 

2. aos 스크립트로 화면에서 꽂아주는 형태 한번만, 보일때마다 설정가능

https://michalsnik.github.io/aos/

 

*글자가 감춰졌다가 올라오는 느낌은 바깥영역을 오버플로우 히든으로 주면 그런느낌을 낼 수 있다

<div class="overflowHidden">

    <p class="title animate__animated animate__slideInUp">

      타이틀이 올라오는건데 오버플로우 히든한경우

    </p>

  </div>

 

.animate__animated {
    animation-duration: 1s;
    animation-fill-mode: both/* 에니메이션 최종 스타일 유지 */
}
@keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
        visibility: visible
    }
 
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
.animate__slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}
 
.animate__fadeInUp {
    animation-name: fadeInUp
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
 
 
 
/* aos예시 */
/* 1. 처음화면 초기설정 */
[data-aos] {
  transition-duration: 1s;  
  transition-timing-function: cubic-bezier(.175,.885,.32,1.275);
}
[data-aos^=fade] {
    opacity: 0;
    transition-property: opacity,transform
}
/* 2. 화면이 보이면 aos-animate 클래스가 붙으면 => 공통 속성 */
[data-aos^=fade][data-aos^=fade].aos-animate {
    opacity: 1;
    transform: translateZ(0)
} 
 
/* ==================================== */
[data-aos=fade-up] {
    transform: translate3d(0,100px,0)
    /* 왼쪽값이 왼쪽오른쪽 / 가운데값이 위아래 */
}
[data-aos=fade-down] {
    transform: translate3d(0,-100px,0)
}
 
[data-aos=fade-right] {
    transform: translate3d(-100px,0,0)
}
 
[data-aos=fade-left] {
    transform: translate3d(100px,0,0)
}