CODEWITHSUNDEEP
cssipadcss-animationsinternet-explorer-11
Flourish Studios
Flourish Studios

Reputation: 31

Background size animation not working in IE11 or Ipad

I am trying to create a simple img zoom with CSS3 animation by setting a background image to a div and then resizing that div with the animation. It works fine in FF and Chrome yet in Safari the effect is not smooth.

I've read that adding -webkit-transform: translateZ(0) can help with smoother animations in Safari yet this has no effect.

Can anyone help. Site here http://form-flourish.businesscatalyst.com/form-pilates.htm

Here is my code.
HTML: 

<div id="home">
</div>

CSS:

   div#home {
    background: url("../images/home-bg.jpg") no-repeat scroll center center;
    background-size: 100% auto;
    float: left;
    margin: 0 0 20px;
    position: relative;
    width: 100%;
    min-height: 100vh;
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 20s;
    -webkit-animation-delay: 1s;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    -webkit-animation-direction: alternate;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    /* Standard syntax */
    animation-name: zoom;
    animation-duration: 20s;
    animation-delay: 1s;
    animation-timing-function: cubic-bezier(0, 0, 1, 1);
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-direction: alternate;
}

    /* Chrome, Safari, Opera */
@-webkit-keyframes zoom {
    0%   {width: 100%; margin-left: 0;}
    100% {width: 150%; margin-left: -25%;}
}
/* Standard syntax */
@keyframes zoom {
    0%   {width: 100%; margin-left: 0;}
    100% {width: 150%; margin-left: -25%;}
}

Upvotes: 2

Views: 3161

Answers (2)

Kazz
Kazz

Reputation: 31

I made a simplified test case from your CSS, and it works both IE11 and Safari, though horizontal scroll bar appears. So, I think there should be some other reasons which interrupts animation in your site.

Test case: animating 'width' and 'margin' (simplified from your code) http://asamuzak.jp/test/background_size_animate_test

IE11 (and 10) indeed lacks support for background-size animation, but I made a polyfill for that before. http://asamuzak.jp/html/438 The document is written in Japanese, but in the script source there is a minimum description in English.

Test case 2: animating 'background-size' with IE polyfill http://asamuzak.jp/test/background_size_animate_test2

Upvotes: 1

Volker E.
Volker E.

Reputation: 6044

For the first part of your question, Internet Explorer 11's set of animatable CSS properties is the same like they've started in IE 10 with, and background-size is not among those animatable ones.
(Sidekick: Even if W3Schools tells so)

See http://msdn.microsoft.com/en-us/library/ie/dn254934%28v=vs.85%29.aspx for a list of supported properties.

Upvotes: 2

Related Questions