1. 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?

Discussion in 'Styling and Customization Questions' started by Reaks Lobby, Dec 4, 2015.

  1. Reaks Lobby

    Reaks Lobby Member

  2. Reaks Lobby

    Reaks Lobby Member

  3. whynot

    whynot Well-Known Member

    Please be patient. you opened this thread 43 minutes ago.
     
  4. Reaks Lobby

    Reaks Lobby Member

    Yes :'(
     
  5. Kintaro

    Kintaro Well-Known Member

  6. Dylan V

    Dylan V Well-Known Member

    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.
     

Share This Page