코스모스팜 스레드

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에 도착할때 구현되도록 하고싶습니다.

 

무제한으로 웹사이트를 만드세요. (코스모스팜 무제한 라이센스)
무제한으로 웹사이트를 만드세요. (코스모스팜 무제한 라이센스)
이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
무제한으로 웹사이트를 만드세요. (코스모스팜 무제한 라이센스)