Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] CSS3 keyframe animation only working in Chrome and iOS

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #188732
    braderz31
    Participant

    I’ve created a ‘CSS only’ image slider but I am completely baffled as to why I can only get it working in Chrome, iOS and Safari on Mac. For some reason it will not work on Mozilla, IE or Safari on PC.

    Can anybody suggest what might be causing this issue please?

    .home-featured {
        background-image: url(images/home_bg.jpg);
        -webkit-animation: slides 20s  infinite;
        -moz-animation: slides 20s  infinite;
        -ms-animation: slides 20s  infinite;
        -o-animation: slides 20s   infinite;
        animation: slides 20s infinite;
    }
    
    @-webkit-keyframes slides {
        25%   { 
            background-image: url(images/home_bg.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            -webkit-background-size: cover; 
        }
        50%   { 
            background-image: url(images/home_bg_2.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            -webkit-background-size: cover; 
        }
        75%    { 
            background-image: url(images/home_bg_3.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            -webkit-background-size: cover; 
        }
        100%   { 
            background-image: url(images/home_bg.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            -webkit-background-size: cover; 
        }
    }
    @-moz-keyframes slides {
        25%   { 
            background-image: url(images/home_bg.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            -moz-background-size:    cover;
        }
        50%   { 
            background-image: url(images/home_bg_2.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            -moz-background-size:    cover;
        }
        75%   { 
            background-image: url(images/home_bg_3.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            -moz-background-size:    cover;
        }
        100%   { 
            background-image: url(images/home_bg.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            -moz-background-size:    cover;
        }
    }
    @-o-keyframes slides {
        25%   { 
            background-image: url(images/home_bg.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            -o-background-size:    cover;
        }
        50%   { 
            background-image: url(images/home_bg_2.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            -o-background-size:    cover;
        }
        75%   { 
            background-image: url(images/home_bg_3.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            -o-background-size:    cover;
        }
        100%   { 
            background-image: url(images/home_bg.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            -o-background-size:    cover;
        }
    }
    @keyframes slides {
        25%   { 
            background-image: url(images/home_bg.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size:    cover;
        }
        50%   { 
            background-image: url(images/home_bg_2.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size:    cover;
        }
        75%   { 
            background-image: url(images/home_bg_3.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size:    cover;
        }
        100%   { 
            background-image: url(images/home_bg.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size:    cover;
        }
    }

    Any help is much appreciated as I just can’t figure this out.

    Many thanks in advance.

    Brad

    #188733
    Paulie_D
    Member

    My guess is that Windows doesn’t like transitioning background images,

    There is no intermediate step between one image and another so at say 80% what are you expecting?

    It can’t be 25% of image and 75% of another….or can it?

    I would also point out there is usually no need to repeat properties / values that aren’t changing.

    However, if you like to put your code (and images) into a Codepen.io demo, we can take a look in our browsers and OSs

    #188734
    Paulie_D
    Member

    Hmmm…apparently it can

    http://codepen.io/Paulie-D/pen/RNNKZL

    Works in Chrome 64bit on W7.

    #188741
    braderz31
    Participant

    :-)

    Yes, this is the result I have on my site. The images fade into one another.

    I found that not repeating the properties prevented it from working in Chrome. Maybe I’m just being stupid and need to play around with the css a bit more.

    Regarding IE and Firefox – still no joy here

    Thanks

    Brad

    #188743
    Paulie_D
    Member

    I know that FF & IE tend to be finicky and might require a 0% value too as part of the keyframes.

    #188747
    braderz31
    Participant

    Here is a CodePen

    I’ve tried adding a 0% value but still can’t get it working in FF or IE.

    It’s baffling!

    #188750
    Paulie_D
    Member

    Aha…apparently – FF and IE do not support the ‘animation/transition’ of background images.

    It’s not a property the spec says should be supported….so they don’t

    #188751
    braderz31
    Participant

    Ah.. what a shame.

    Thought I was on to something there.

    Thanks so much :-)

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.