CSS-Transitions в Safari

Благодаря новым технологиям, и в частности CSS3, мы можем создавать анимацию на сайте всего лишь парой строк. Движение элементов стало плавным, все меньше и меньше графики используют при верстке сайта. Теперь скругленные углы стало делать гораздо проще, а градиент можно создать указав два цвета и направление.

Сегодня, создавая сайт его можно украсить очень красивой анимацией элементов, которые не только будут радовать глаз, но и будут удобными для пользователя — никаких резких движений, появлений, сдвигов. Работая над одним проектом я заметил одну особенность в браузере Сафари: -webkit-transition: all 0.5s ease — не работает!

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

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

Я проверяю все свои проекты на всех текущих версиях браузеров, благо сегодня даже Internet Explorer вроде как собрался и многое поддерживает, хотя качество его работы оставляет желать лучшего, и каково было мое удивление что Safari вообще отказался показывать анимацию.

В поисках нужно информации я перерыл достаточно сайтов, перепробовал несколько костылей, однако обхитрить браузер Apple мне помогло лишь установка параметра -webkit-transition-property, в котором назначил те параметры стилей которые менялись, а именно opacity и margin-top.

Тем не менее, отработка анимации в Safari все-равно оставляет желать лучшего: присутствуют рывки, странно работает исчезновение элемента (каллбек, callback). Возможно вы, уважаемые подписчики что-то еще подскажете, чтобы улучшить отработку анимации на CSS-transition в Safari?

Есть вопрос? Что-то не понятно в статье? Хочешь отблагодарить? Пиши комментарий!
Если тебе понравилась статья, а тем более если еще и помогла - поставь +1 и нажми "Мне нравится"!

(365 оценок, среднее: 4,70 из 5)

Tweet