Как установить видимость: скрытый, то видимость: видимый в анимации CSS?

Question

Редактировать 3 На самом деле, мне вообще не нужно было возиться с видимостью / непрозрачностью ... поэтому я удалил эти строки (как показано в редактировании 2) ... добавил анимацию-state: приостановлено / работает ....

Получил эффект, который я хотел ...

---

Редактировать 2 : Спасибо Джинето за идею! Внесены некоторые изменения (см. Ниже):

.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 с невидимой видимостью для получения более подробной информации