如何将关键帧合并到多个元素?

时间:2018-03-27 19:10:40

标签: jquery css3 animation

......或者我甚至需要吗? 我有一个导航栏,一旦你开始向下滚动页面就会改变。一些不同的元素受到影响。现在我正在使用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'
                });
            }
        });
    }
}

这很好用。但我希望过渡到动画而不仅仅是瞬间变化。我已经看到这是用关键帧完成的,但只使用一个元素。

希望就如何继续提供一些建议。

1 个答案:

答案 0 :(得分:0)

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

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