Question

所需效果适用于Firefox和Chrome，但不适用于Safari。

动画的行为如下：

立即向左倾斜
放大
慢慢向右倾斜
缩小

这些都可以正常工作，除了在Safari中，没有缩小。我不能为我的生活找出原因。请，任何帮助表示赞赏。

        #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>

可以在http://blindmikey.com/dev/animation/scribbles2.php

查看演示和实时代码

Answer 1

我遇到了类似问题，并在此处找到了答案：Safari: Absolutely positioned DIVs not moving when updated via DOM

简而言之，为Safari 5.1

设置setTimeout（）中的变换样式

CSS3动画比例在Safari中无法正常工作

1 个答案: