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

Редактирование 3 На самом деле, мне вообще не нужно было возиться с видимостью/непрозрачностью... поэтому я удалил эти строки (как показано в редактировании 2)... добавил animation-play-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, так это то, что анимация видна при запуске...

Кто-нибудь знает, как решить?