Масштаб анимации CSS3 не работает должным образом в Safari - PullRequest
Новая
       43

Масштаб анимации CSS3 не работает должным образом в Safari

2 голосов
/ 30 сентября 2011

Нужный эффект работает в 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

1 Ответ

1 голос
/ 13 августа 2012

У меня была похожая проблема, и я нашел ответ здесь: Safari: Абсолютно позиционированные DIV не перемещаются при обновлении через DOM

Короче говоря, установите стиль преобразования в setTimeout () самостоятельно для Safari 5.1

...