CSS "all"전환이 작동하지 않습니다.

Question

전혀 작동하지 않는 것 같아서 CSS 전환에 도움이 필요합니다. 여기에 내 CSS 코드. 내가 놓친 것 같니?

/*header navigation in homepage*/ 
    .home header#main-header { 
     position: absolute; 
     top: auto !important; 
     bottom: 0px !important; 
     background: rgba(0, 0, 0, 0.7); 
     transition: all 3s ease-in-out; 
    } 
    .home header#main-header.et-fixed-header { 
     position: fixed !important; 
     top: 0px !important; 
     bottom: auto !important; 
     transition: all 3s ease-in-out; 
    } 
    /*end of header navigation in homepage*/ 
    /*full width slider in homepage*/ 
    .fs{ 
     position:absolute; 
     top:0; right:0; bottom:0; left:0; 
     z-index: 10; 
     background-position:bottom; 
     background-size: inherit; 
    } 
    .home #page-container{margin-top:100vh !important;} 
    /*end of full width slider in homepage*/ 

아, 여기에 웹 사이트에 대한 링크입니다 ->http://concept1.mystudioengine.site/ 난 할 노력하고있어 스크롤에 애니메이션을 했어야 헤더 탐색 모음입니다. 도와주세요. 모든 조언을 많이 부탁드립니다.

Answer 1

먼저이 경우 모두 사용하는 것이 좋습니다. 애니메이션을 적용하려는 특정 속성마다 전환을 추가하십시오.

top: auto에서 top: 0px과 같이 애니메이션을 적용 할 수없는 속성과 값이 있습니다.

top과 같은 애니메이션 속성은 성능 질문에 권장되지 않으므로 this post about achieving 60 FPS animations 및 about Critical Rendering Path을 읽어 보시기 바랍니다.

/*header navigation in homepage*/ 
.home header#main-header { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    background: rgba(0, 0, 0, 0.7); 
    transform: translateY(-100%); 
    transition: transform 3s ease-in-out; 
} 
.home header#main-header.et-fixed-header { 
    position: fixed; 
    transform: translateY(0); 
} 
/*end of header navigation in homepage*/