jquery - 如何将关键帧合并到多个元素中？

Question

...或者我什至需要？ 我有一个导航栏，一旦你开始向下滚动页面就会改变。一些不同的元素受到影响。现在我正在使用 jQuery

$(document).ready(function()
{
    var scroll_start = 0;
    var change = $('.banner');
    var offset = change.offset();
    if (change.length)
    {
        $(document).scroll(function()
        {
            scroll_start = $(this).scrollTop();
            if (scroll_start > offset.top)
            {
                $(".navbar").css('background-color', '#000');
                $(".nav-item a").css('color', "#27AAE2");
                $('.logo-img').css({
                'height':'30px',
                'width':'215px'
                });
            }
            else
            {
                $('.navbar').css('background-color', 'transparent');
                $(".nav-item a").css('color', "#FFF");
                $('.logo-img').css({
                'height':'45px',
                'width':'310px'
                });
            }
        });
    }
}

这很好用。但我希望过渡是动画的，而不仅仅是即时变化。我已经看到使用关键帧完成此操作，但只使用了一个元素。

只是希望得到一些关于如何进行的建议。

Answer 1

原来我回答了我自己的问题。 我创建了关键帧，然后从 jquery 添加了这些关键帧。

在关键帧内，我可以做出我能想象到的每一个改变......只需从 jquery 调用一次该类。