css 애니메이션 문의

현재 회사 홈페이지를 제작하고있습니다.

 

특정 텍스트에 css 애니메이션 효과를 주었는데

원페이지 홈페이지다 보니 효과가 보이지 않습니다.

그래서 스크롤이 내려 애니메이션효과가 있는곳에 도착할때 

효과를 보여주고 싶은데 어떻게 수정해야할지 모르겠어서 문의드립니다.

 

.about_text1 {
    font-size:16px;
    line-height: 1.5;
    margin:0px;
    width:900px;
    position:absolute;
    top:0px;
    left:0px;
    
    -webkit-animation-name: about_text1;
    -webkit-animation-duration: 1.5s;
    animation-name: about_text1;
    animation-duration: 1.5s;    
    }
    
        @-webkit-keyframes about_text1 {
          from {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
          }
        
          to {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
          }
        }
        @keyframes about_text1 {
          from {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
          }
        
          to {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
          }
        }
       

정리해서 말씀드리자면 위의 애니메이션효과가 스크롤을 내려 특정 div에 도착할때 구현되도록 하고싶습니다.

 

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기