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*/