Ads
Comments 99
+2
Gif вам такой прозрачности не даст + добавит один запрос.
+1
Изменить цвет/размер/скорость и направление анимации в данном случае в разы проще. Так что сравнение с графикой неуместно.
+6
1. 1 запрос который скешируется и на серверной стороне и на клиентской и больше не будет подгружаться, потому и на сервере он отдастся из памяти и на клиентской стороне тоже из памяти будет получатся
2. под линуксом у меня нагрузка ~10% от одной такой стрелочки, как вы думаете какая нагрузка от гифки? ;-)
3. «такая прозрачность» — имеются в виду размытые границы стрелки?
-12
не работает в Google Chrome 20.0.1132.47 m Win7 (на минуточку, самый популярный браузер в мире ;)
временами мелькает стрелка, когда есть задержка с отрисовкой

в ФФ 12.0 работает

+1
У меня эта же версия стоит, Win7 x64, всё прекрасно работает.
0
За слово sppiner, addblock+ может вырезать. Если бы оно просто не работало, были бы бордеры хотя бы.
-1
«даже с отключенными плагинами — результат — gyazo.com/53eb9a6c6d1a90ac2ac294820d5ef86f»
адблока нет

и чуть выше — «временами мелькает стрелка, когда есть задержка с отрисовкой»

просто из-за постоянной перерисовки самой стрелки не видно.
+2
Но вы понимаете, что проблема только у вас у одного персонально, а не у всего мира? Это ведь о чём-то говорит.
0
Не только у него. У меня ровно то же наблюдается (Chrome 20.0.1132.47 m, Win7×64). Плагинов нет, инкогнито-режим. Редко-редко моргает стрелочка, и всё.
0
А вы пробовали вручную запустить пример, без использования jsfiddle? Т.е. html-код скопировать в новый файл и запустить.
0
Тоже самая сборка и виндоус, всё отображается. Попробовал на нетбуке — отображается только часть кружочка, и стрелка мелькает. Сначала стал дулмать на аппаратное ускорение, но оно оказалось отключено и там и там. Не уж то зависит от видеокарты?
0
Вполне может не работать из за видео карты, точно такое встречалось с поддержкой transform3d, может и просто с transform тоже есть подобные проблемы.

Причем даже modernizr пока не умеет определять поддержку на уровне железа.
0
А вообще какие-то противоречия есть. Флаг для обработки цсс анимации на gpu в хроме есть, но он отключен. Но друго варианта, почему так происходит у меня нет.
+1
А знаете, похоже, Вы правы. Проверил на другой машине с нормальным видео — всё крутится. А у меня древняя интеловская графика G31…

Получается, Хром перекладывает CSS-анимацию на видеокарту, а уж справилась та или нет — это его не волнует. Это плохо:(
0
Ага. На нетбуке в другом браузере были видны фризы, когда в хроме анииация была плавная хотя и не всё отображалось.
0
В хроме есть about:flags, попробуйте там включать/отключать параметры:

«Переопределение списка программного рендеринга»,
«Обработка всех страниц с помощью графического процессора»,
«Enable accelerated CSS animations»,
«Ускоренная работа фильтров SVG и CSS с помощью графического процессора»,
«Отключение вертикальной синхронизации графического процессора»

Если после каких-то изменений заработает отпишитесь тут пожалуйста :)
0
Я вчера это пробовал, по умолчанию у меня это почти всё отключено. Ни каких изменений, увы. На большом всё включал, и так и так хорошо, на нетбуке и так и так плохо. ТакИе дела :(
0
Как вариант попробуйте остановить анимацию (закомментируйте строки с анимацией), если блок появится значит проблема в анимации и, возможно, в рендеринге.
0
У вас сам блок вообще не отображается. Проблема явно на вашей стороне.
+7
В Опере скролл скачет. Впрочем, там часто что-нибудь скачет. :)
+2
вам пишут 2 человека, что метод не работает как заявлено («работает во всех современных браузерах» ), а вы талдычите, что у вас работает.

с таким подходом ваш метод никому не нужен.
0
Прежде чем обвинять кого-то в криворукости, выровняйте свои руки ©
0
Я никого не минусую из принципов. А баг есть только у этого человека, и не известно, что у человека ещё этого есть. )
+1
Но это не говорит о том, что автор виноват в чём-то. Раз на одинаковых системах, сборка хрома что-то работает по разному, значит стоит писать в баг терекер хрома, а не то, с каким фэ пишет IntenT.
UFO landed and left these words here
0
Без аппаратного ускорения, какой-то глюк с появляющейся/исчезающей полосой прокрутки.
0
Opera Next последняя сборка, Ubuntu x64 — скачет однако! И объект вращения во время того, как скачет болтается влево-вправо.
Chromium хорошо работает.
В FF 14.0 как-будто центр тяжести потерялся, немного заносит.
Так что не всё так хорошо, как было задумано.
0
Я чуть ниже ответил что есть такая проблема, всё зависит от конкретной реализации анимаций в браузере.
+2
Странно, что в Opera на разных платформах (у вас же Win?) ведёт себя по разному, движок ведь один должен быть.
А так в топку такие эффекты, что они даже в одном браузере работают по разному.
Разработчикам, что ли скинуть ссылку на пример, пусть думают?
0
Разработчики знают об этом, но такие вещи реализуют «чтобы было». Понятное дело что в серьёзных проектах где нужна полная кроссбраузерность такими приёмами не похвастаешься :)
0
Открыл пример с jsfiddle — там Opera нормально работает (сглаживание самое приятное), а в FF всё-таки что-то с центрированием.
Что именно по сравнению с оригиналом вы меняли? Видимо, это в вашем примере исправлено, я сначала первый смотрел.
UFO landed and left these words here
0
Угу, css animation себя ведёт вообще стрёмно. Делал открытку давно, тоже хотел заюзать, потом решил что пусть лучше будет transition и откопал свою старую тестовую либу.

artlark.ru/demos/8march/
0
Ну это я громко сказал. ) Просто набор кусков кода, всякие эксперименты, всё на коленке писал, фор фан так сказать. Потом появились идеи, и собрал во что-то рабочее.
Ещё вот такие делал:
artlark.ru/demos/bubbles/
artlark.ru/demos/maya/

У меня на гитхабе все примеры, если интересно. Код конечно соответствует коленочному )
github.com/SerDIDG
0
Аппаратное ускорение Оперы включено? У меня в примере автора с ним — стрелка моргает, без него — все нормально. Как видимо и у хрома выше.
0
В фф тоже скачет и везде должен скакать, так как вращается бокс, и в зависимости положения его углов увеличивается ширина\высота парента. Позиционирование спасёт мир.
0
Я пытался играться с transform-origin в фф, но не получилось нормировать. Есть вариант пихать в ещё один блок и анимировать его, тогда должно плавно идти. Насколько я понял анимация так отображается из-за псевдо-элемента который увеличивает высоту блока на несколько пикселей, только вот фф их считает, а хром игнорирует и вращает блок 35 на 35.
0
С анимацией всё в порядке то, просто если сузить окно, горизонтальный скролбар начинает пульсировать. Связано с тем, что когда бокс вращается, и собственно его диагональ больше чем его сторона, увеличивается и родительский блок. В принципе это проведение есть правильным. А вот хром как-то странно себе ведёт с этим, да. Но я не знаю что из этого хуже, и во что серьёзное может выльется на более сложных задачах.
0
С Win смотрите? Я у себя проверил на всех браузерах — нигде скроллбар не изменялся.
0
Понял о чём речь, меняется только горизонтальный скроллбар, а я вертикальный проверял.
0
Разные браузеры по-разному отображают такие вещи. У FF хорошо заметны полоски на углах скруглённой части (не видите — прибавьте толщины линиям), у оперы как всегда косяки с позиционированием, но полосок на углах нет, в других браузерах скорее всего другие косяки (проверять лень), потому пока лучше всё же что-то другое 8(

А вообще скругления и поворот — это то что сейчас сильно различается в разных браузерах, хотя все вроде бы поддерживают
0
«Опера 12» на «Маке» — скачет скролл, в последних ФФ, Сафари и Хроме на той же платформе — всё ок.
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
0
Тогда уж префиксы ставьте или Chrome 20.0.1132.47 m не включен в список «всех современных браузеров»?
UFO landed and left these words here
UFO landed and left these words here
0
Да, работает. Спасибо за пример, всегда центрировал с помощью margin и position.
UFO landed and left these words here
+1
Увы, в опере не пашет. Да и похоже что вы старый стандарт используете, в рекомендации сейчас flex и inline-flex: w3c, mozilla
UFO landed and left these words here
0
Мне кажется что лучше не использовать стандарт от которого отказался w3c, даже если он поддерживается в каких-либо браузерах. Пройдёт год-два и всё что было свёрстано на этих свойствах просто полетит.
Кстати, в примере из-за 100% высоты появился скролл.
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
0
Так объясните в чём? Использовать устаревшие свойства тоже неправильно.
UFO landed and left these words here
0
Пока что это один из лучших вариантов на текущей спецификации и поддержке, если мы используем не абсолютно спозиционированный блок.
Можно конечно сделать на inline-block, но мы лишимся :before и придётся свойства для текста заново перезаписывать (word-spacing).
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
Only those users with full accounts are able to leave comments.  , please.