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

【问题标题】：How to set visibility:hidden then visibility:visible in a CSS animation?如何在 CSS 动画中设置可见性：隐藏然后可见性：可见？
【发布时间】：2020-02-28 17:39:24
【问题描述】：

编辑 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 时会发生什么动画在开始时是可见的......

有人知道怎么解决吗？

【问题讨论】：

标签： jquery css

【解决方案1】：

尝试将不透明度从 0 转换为 1。

详情请见：CSS transition with visibility not working

【讨论】：