CSS вращение, перевод, масштабная ошибка анимации - PullRequest
Новая
       40

CSS вращение, перевод, масштабная ошибка анимации

0 голосов
/ 31 августа 2018

Я создал анимацию для HTML / CSS3, используя ключевые кадры.

Анимация представляет собой значок, который должен вращаться и масштабироваться вокруг своей центральной точки.

Анимация работает в Chrome, но в Safari она не переводится должным образом до конца анимации.

Вот оно, в положении - 1007 * сафари :

enter image description here

Вот оно - плавно анимируется в положение - в хром :

enter image description here

Вот анимация CSS: 

@keyframes icon-animation {
    0% {
        left: 188.5px;
        top: 187.5px;
        transform: translate(-50%, -50%) rotate(-45deg);
        transform-origin: 50% 50%;
        width: 286.84px;
        height: 233.81px;
    }
    16.6667% {
        transform: translate(-50%, -50%) rotate(-45deg);
        transform-origin: 50% 50%;
    }
    50% {
        left: 188px;
        top: 188.5px;
    }
    66.6667% {
        transform: translate(-50%, -50%) rotate(0deg);
        transform-origin: 50% 50%;
        width: 200px;
        height: 163px;
    }
    100% {
        left: 188px;
        top: 188.5px;
        transform: translate(-50%, -50%) rotate(0deg);
        transform-origin: 50% 50%;
        width: 200px;
        height: 163px;
    }
}

HTML и CSS по умолчанию являются длинным шрифтом, поэтому я создал пример кода, который можно найти здесь:

https://codepen.io/traviskirton/pen/NLdKbb

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Введение

Я бы упростил ваш код. Я проверил таблицу совместимость на transform-origin, и она не очень подходит для сафари. Существует вопросительный знак о transform-origin svg support, а также требуется префикс -webkit- вендора, который просто усложняет задачу для простого эффекта, который вы хотите.

См .: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin enter image description here

Мне удалось получить точно такой же эффект , просто комментируя различные вещи (и изменяя левые / верхние значения для некоторых ключевых кадров). И это прекрасно работает как в сафари, так и в Chrome.

Пример - Онлайн

Я протестировал и ваш пример, и мой, на моем мобильном сафари: https://codepen.io/menelaosbgr/pen/pOpXbB

Код: 

@keyframes icon-animation {
    0% {
        left: 71px; 
         top: 90px;
        transform: rotate(-45deg);
/*         transform-origin: 50% 50%; */
        width: 286.84px;
        height: 233.81px;
    }
    16.6667% {
/*         left: 188px;
        top: 188.5px; */
        transform: rotate(-45deg);
/*         transform-origin: 50% 50%; */
    }
    50% {
/*         left: 188px;
        top: 188.5px; */
    }
    66.6667% {
/*         left: 188px;
        top: 188.5px; */
        transform:  rotate(0deg);
/*         transform-origin: 50% 50%; */
        width: 200px;
        height: 163px;
    }
    100% {
        left: 90px; 
         top: 90px;
        transform: rotate(0deg);
/*         transform-origin: 50% 50%; */
        width: 200px;
        height: 163px;
    }
}
0 голосов
/ 10 сентября 2018

Несмотря на то, что, возможно, это ошибка, специфичная для Safari, я бы не стал слишком сильно путаться с вычислением статических пикселей + регулировкой верхнего и левого углов.

То, что вы в основном делаете там, это уменьшение размера изображения на 30%.

Вы можете легко добиться того же с помощью scale.

После упрощенной версии вашей анимации, которая также работает в Safari. 

@keyframes icon-animation {
    0% {
        transform-origin: 50% 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    100% {
      transform-origin: 50% 50%;
      transform: translate(-50%, -50%) rotate(0deg) scale(.70);
    }
}

Если scale не вариант, попробуйте поиграть с полями, но это может привести к нежелательному поведению в Chrome или Firefox.

...