Search code examples
animationcsssafariwebkitscale

CSS3 Animation Scale Not Working as Expected in Safari

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

Solution

  • 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