Почему слетает transform css при анимации?
Вокруг кнопки есть круговой текст, я его анимировал с помощью такого кода:
@keyframes rotate { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .round-text { position: absolute; pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 125%; max-width: none; animation: rotate 8s infinite linear; } |
@keyframes rotate { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .round-text { position: absolute; pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 125%; max-width: none; animation: rotate 8s infinite linear; }
У меня на Iphone 11 все работает хорошо, но у клиента на iphone 14 этот кружок слетает:
Может вы знаете причину?
Вот ссылка на сайт, кружок на первом блоке - https://damirtok.ru/sites/med/
Дополнительно:
Поменяйте абсолют на позиционирование гридом.
И останется только rotate
grid еще не пользовался, а если убрать transform и использовать px, то займет очень много времени (т.к. у кнопок разные размеры)
но это извратик
Ещё выяснить нет ли там тупо кэша.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Проблема, когда свойство transform в CSS слетает при анимации, может возникать из-за различных причин. Вот несколько возможных причин и способы их решения:
1. Использование свойства transform-origin: При использовании анимации transform, если не задано свойство transform-origin, браузер может интерпретировать это как изменение точки трансформации, что приводит к сбросу преобразования. Решение: укажите точку трансформации с помощью свойства transform-origin.
2. Использование анимации с несовместимыми свойствами: Некоторые свойства CSS могут конфликтовать друг с другом при анимации. Например, использование анимации с display: none или position: absolute может привести к сбросу transform. Решение: убедитесь, что все свойства CSS, используемые в анимации, совместимы между собой.
3. Использование анимации с несовместимыми браузерами: Некоторые браузеры могут не поддерживать определенные свойства CSS или их комбинации при анимации, что может привести к сбросу transform. Решение: убедитесь, что ваш код адаптирован для работы во всех популярных браузерах и используйте вендорные префиксы при необходимости.
4. Использование некорректного синтаксиса CSS: Неправильное использование синтаксиса CSS, такое как неправильное объявление свойств или неправильное закрытие скобок, может привести к сбросу transform. Решение: внимательно проверьте свой код на наличие ошибок в синтаксисе.
В целом, чтобы избежать проблем со сбросом transform при анимации, следует внимательно следить за корректностью написания CSS кода, проверять совместимость свойств, указывать точку трансформации и учитывать особенности работы различных браузеров.
Проблема сброса CSS свойства transform во время анимации может возникать из-за различных факторов. Одной из причин может быть конфликт между различными значениями transform, которые применяются к элементу в разное время. Это может привести к тому, что браузер не может корректно интерпретировать последние значения и, следовательно, сбрасывает свойство transform.
Другой причиной может быть использование анимаций, которые изменяют размер или позицию элемента. В таких случаях браузер может рассматривать изменения как новый контекст для применения transform и, таким образом, сбрасывать его.
Чтобы избежать сброса свойства transform во время анимации, рекомендуется следовать нескольким простым правилам. Во-первых, убедитесь, что вы используете правильные значения transform для каждого этапа анимации. Во-вторых, избегайте изменения размера или позиции элемента во время анимации, если это необходимо, применяйте transform к контейнеру элемента, а не к самому элементу.
Пример:
.container { transform: scale(1); transition: transform 0.3s ease; } .element { transform: scale(1); } .element:hover { transform: scale(1.2); }
Такой подход поможет избежать конфликтов и сбросов свойства transform во время анимации. Не забывайте также проверять поддержку браузеров для свойства transform и анимаций, чтобы убедиться, что ваш код будет работать корректно на всех устройствах.