• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.5 How to make an animation on my header?

Dylan V

Well-known member
#6
Add this in EXTRA.css:
Code:
#logoBlock
{
    animation: bannerAnimate 150s infinite linear;
    -webkit-animation: bannerAnimate 150s infinite linear;
    -moz-animation: bannerAnimate 150s infinite linear;
    -o-animation: bannerAnimate 150s infinite linear;
}

@keyframes bannerAnimate
{
    from
    {
        background-position: 0;
    }
   
    to
    {
        background-position: -1980px;
    }
}

@-webkit-keyframes bannerAnimate
{
    from
    {
        background-position: 0;
    }
   
    to
    {
        background-position: -1980px;
    }
}

@-moz-keyframes bannerAnimate
{
    from
    {
        background-position: 0;
    }
   
    to
    {
        background-position: -1980px;
    }
}

@-o-keyframes bannerAnimate
{
    from
    {
        background-position: 0;
    }
   
    to
    {
        background-position: -1980px;
    }
}
Change the 1980 with the resolution of your image.