Почему я не могу запустить один ключевой кадр в другой? - PullRequest
Новая
       43

Почему я не могу запустить один ключевой кадр в другой?

0 голосов
/ 01 декабря 2018

Итак, у меня возникла проблема с попыткой использовать 2 ключевых кадра.Первый срабатывает, когда я нажимаю маленький div с шириной 5%.Затем этот div расширяется до 100% ширины, и в правой верхней части новой расширенной версии div отображается кнопка закрытия (до этого момента код работал нормально).Когда я нажимаю кнопку закрытия, div должен снова уменьшиться до 5% (2. ключевой кадр), который не хочет работать.

HTML: 

<div class="contactbutton">
                    <i class="fas fa-times-circle"></i>
                    <h2>Direkter Kontakt</h2>    
                    <i class="fas fa-sort-down"></i>
                </div>

CSS: 

@keyframes contactspread{
    to{
        width: 100%;
    }
}

@keyframes contactback{
    from{
        width: 100%;
    }
    to{
        width:5%; 
    }
}

JQuery: 

    $('.contactbutton').click(function(){
        $(this).css('animation','contactspread 1.5s');
        $(this).css('animation-fill-mode','forwards');
        $('.contactbutton h2').css('display','none');
        $('.fa-sort-down').css('display','none');
        $('.fa-times-circle').css('display','block');
});

$('.fa-times-circle').click(function(){
    $(this).css('display','none');
    $('.fa-sort-down').css('display','block');
    $('.contactbutton h2').css('display','block');
    $('.contactbutton').css('animation','contactback 1.5s');
    $('.contactbutton').css('animation-fill-mode','forwards');
});

Не могли бы вы, ребята, объяснить, почему второй ключевой кадр не срабатывает?Спасибо!

...