CSS3 Animation Scale Not Working as Expected in Safari

Question

The desired effect is working in Firefox and Chrome, but not Safari.

The Animation is to behave as follows:

Pan Immediately to the left
Zoom in
Slowly Pan to the right
Zoom out

These all work fine except that in Safari, there is no Zooming Out. I can't for the life of me figure out why. Please, any help is appreciated.

        #frame {
            position:relative;
            width:660px;
            margin:5% auto 0;
            height:177px;
            border:1px solid #999;
            overflow:hidden;
            -webkit-transform:scale(.5);
        }

        .paper {
            position:absolute;
            top:0;
            left:0;
            width:660px;
            height:177px;
        }

        .scribble {
            position:absolute;
            top:0;
            left:0;
            width:0;
            height:177px;
        }

        .green {
            background:url(scribble1.png) no-repeat 0 0;
            top:0;
            }

        .red {
            background:url(scribble2.png) no-repeat 0 0;
            top:45px;
            }

        .blue {
            background:url(scribble3.png) no-repeat 0 0;
            top:82px;
            }

    /*
     *  Add Zoom-in Routine
     *
    */
        @-webkit-keyframes zoomin {
            0% {
                -webkit-transform: scale(1);
            }
            100% {
                -webkit-transform: scale(2);
            }
        }

    /*
     *  Add Zoom-out Routine
     *
    */
        @-webkit-keyframes zoomout {
            0% {
                -webkit-transform: scale(2);
            }
            100% {
                -webkit-transform: scale(1);
            }
        }

    /*
     *  Add Pan Routine
     *
    */
        @-webkit-keyframes pan {
            0% {
                left:660px;
            }
            50% {   
                left:-80px;
            }
            100% {
                left:0;
            }
        }

    /*
     *  Add Draw Routine
     *
    */
        @-webkit-keyframes draw {
            0% {
                width:0;
            }
            100% {
                width:660px;
            }
        }

    /*
     *  Begin Animation
     *
    */

        .paper {
            -webkit-animation:
                pan 10s ease-out,
                zoomin 3s ease, 
                zoomout 5s 5s ease; 
            -webkit-animation-fill-mode:forwards;
        }           
        .green {
            -webkit-animation:draw 10s ease;
            -webkit-animation-fill-mode:forwards;
        }
        .red {
            -webkit-animation:draw 9s linear;
            -webkit-animation-fill-mode:forwards;
        }
        .blue {
            -webkit-animation:draw 8s ease-in-out;
            -webkit-animation-delay:2s;
            -webkit-animation-fill-mode:forwards;
        }

<body>

    <div id="frame">
        <div class="paper">
            <div class="scribble blue"></div>
            <div class="scribble green"></div>
            <div class="scribble red"></div>
        </div>
    </div>

</body>
</html>

The demonstration and live Code can be viewed at: http://blindmikey.com/dev/animation/scribbles2.php

That is *a lot* of code. It may be better to shorten the comments and remove parts that are not relevant to the question. — Yi Jiang, Sep 30 '11 at 08:19
Showing up the same for me on Mac with Safari Desktop, Safari iOS (with a jerky ending because it doesn't support animation fill mode) and Chrome — methodofaction, Oct 04 '11 at 22:26

score 1 · Accepted Answer · edited May 23 '17 at 11:48

1

I had a similar problem and found my answer here: Safari: Absolutely positioned DIVs not moving when updated via DOM

In short, set the transform style in a setTimeout() by itself for Safari 5.1

edited May 23 '17 at 11:48

Community

1
1

answered Aug 13 '12 at 11:34

Sembiance

833
3
11
14

CSS3 Animation Scale Not Working as Expected in Safari

1 Answers1