Question

编辑3 实际上，我根本不需要弄乱可见性/不透明度...因此我删除了这些行（如编辑2所示）...添加了动画-播放状态：已暂停/正在运行。...

达到我想要的效果...

编辑2 ：感谢Gineto的想法！进行了一些更改（请参见下文）：

.logos2{
    position: relative;
    float: right;
    height:100%;
    right:75px;
    animation: move 1s;
    animation-play-state:paused;
    border: 1px solid #000;
}

和在jQuery中

jQuery(document).ready(function(){
jQuery(".logos").animate({height: +800}, 500);
    jQuery(".logos").promise().done(function(){
      jQuery(".logos2").css({"animation-play-state":"running"});
    });
});

编辑：通过更改jQuery有点接近了：

jQuery(document).ready(function(){

    jQuery(".logos").animate({height: +800}, 500);
    jQuery(".logos").promise().done(function(){
      jQuery(".logos1").addClass('logos2');
    });

  });

但是动态添加班级是很多徽标...

我希望我的CSS动画首先被隐藏（让另一个动画运行），然后在以后使初始动画可见。

这是我的CSS代码：


.logos{    
    position: absolute;
    width:100vw;
    margin:0 auto;
    height:0vh;
    bottom: 0;
}
.logos1{

    position: relative;
    float: right;
    height:100%;
    top: 100px;
    right:75px;
    visibility: hidden;
    border: 1px solid #000;
}

@keyframes move{
    0%{right:-100px;}
    50%{right:90px;visibility: hidden;}
    100%{right:75px;visibility: visible}
}


.logos2{

    position: relative;
    float: right;
    height:100%;
    top: 100px;
    right:75px;
    animation: move 1.5s; 
    animation-delay: 1s;
    border: 1px solid #000;
}

和我的jQuery

jQuery(document).ready(function(){

    jQuery(".logos").animate({height: +800}, 500);
    jQuery(".logos1").height(100);
    jQuery(".logos1").promise().done(function(){
      jQuery(".logos1").addClass('logos2');
      jQuery(".logos2").removeClass('logos1');     
      jQuery(".logos2").promise().done(function(){
      jQuery(".logos2").css('visibilty','visible');
      })
    })
  });

运行jquery时发生的是，动画在开始时就可见...

有人知道如何解决吗？

Answer 1

尝试将不透明度从0过渡到1。

有关详情，请参见：CSS transition with visibility not working

如何在CSS动画中设置“可见性：隐藏”然后设置“可见性：可见”？

1 个答案: