Question

所以我有点想尝试使用2个关键帧。当我按5％宽度的小div时，第一个触发。然后，该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');
});

你们能否解释一下，为什么第二个关键帧没有触发？谢谢！

为什么不能将一个关键帧触发到另一个？

0 个答案: