element fadeIn

youngkyu MIn·2024년 1월 25일
<style>
      /* fadeInLeft 애니메이션 정의 */
    @keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
    }

    /* fadeInRight 애니메이션 정의 */
    @keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
    }

    /* 애니메이션 적용 클래스 */
    .wow.animated {
    visibility: visible;
    }

    /* fadeInLeft 애니메이션 적용 */
    .wow.fadeInLeft {
    animation-name: fadeInLeft;
    animation-duration: 1s;
    animation-fill-mode: both;
    }

    /* fadeInRight 애니메이션 적용 */
    .wow.fadeInRight {
    animation-name: fadeInRight;
    animation-duration: 1s;
    animation-fill-mode: both;
    }
</style>

<div id="innerLeft" class=" w-1/2 h-full flex flex-col items-center img_wrap wow fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;"></div>

<div id="innerRight" class=" w-1/2 h-full flex flex-col items-center img_wrap wow fadeInRight animated" style="visibility: visible; animation-name: fadeInRight;"></div>
  
  
profile
한 줄 소개

0개의 댓글