CSS"所有"过渡不起作用

时间:2017-03-10 18:26:19

标签: css css3 animation css-transitions css-animations

我需要帮助我的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/ 我试图做的是标题导航栏应该在滚动时有动画。请帮忙。任何建议将不胜感激。

1 个答案:

答案 0 :(得分:0)

首先,在这种情况下使用all并不是一个好主意,为每个要设置动画的特定属性添加转换。

因此,有些属性和值无法设置动画,例如top: autotop: 0px

但不建议将top等动画属性用于效果问题,建议您阅读this post about achieving 60 FPS animationsabout 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*/