Ошибка вращения, перевода и масштабирования CSS в анимации
Я создал анимацию для HTML / CSS3 с использованием ключевых кадров.
Анимация представляет собой значок, который должен вращаться и масштабироваться вокруг своей центральной точки.
Анимация работает в Chrome, но в Safari она не переводится должным образом до конца анимации.
Вот оно - защелкивание - в сафари:
Вот он - плавно переходящий в позицию - в хром:
Вот 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 по умолчанию длинные, поэтому я создал пример кода, который можно найти здесь:
@ C4 - Трэвис developer.mozilla.org/en-US/docs/Web/CSS/transform-origin. См. Таблицу совместимости.
@undefinedMayNotBeNull попробовал.
Ответы 2
Несмотря на то, что это вполне возможно специфическая ошибка 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.
Масштабный подход может / не может быть для нас возможным. У нас есть некоторые жесткие ограничения, которые требуют от нас написания кода определенным образом. Между вашим ответом и @menelaos-bakopoulos выше может быть компромиссное решение.
вступление
Я бы действительно упростил ваш код.
Я проверил таблицу совместимость для transform-origin, и она действительно не соответствует сафари. Есть вопросительный знак по поводу transform-origin svg support, и он также требует префикса поставщика -webkit-, который просто делает вещи довольно сложными для простого эффекта, который вы хотите.
См .: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
Мне удалось получить точно такой же эффект, просто комментируя различные вещи (и изменяя значения левого и верхнего края для некоторых ключевых кадров). И это отлично работает как в сафари, так и в хроме.
Пример - Интернет
Я проверил и ваш пример, и свой на своем мобильном сафари: 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;
}
}
Привет спасибо. На самом деле у нас есть некоторые жесткие ограничения на то, как мы пишем наш css, поэтому я специально спрашиваю о подходе, который я опубликовал выше. Между вашим ответом и идеей @andrea-giammarchi может быть золотая середина. Придется поэкспериментировать.
префикс производителя? stackoverflow.com/questions/30688908/…