Пиксельный переход на CSS Поворот анимации - PullRequest
Новая
       6

Пиксельный переход на CSS Поворот анимации

0 голосов
/ 16 февраля 2019

Итак, я пробовал эту проблему с использованием JS для интерактивных элементов, и я решил сделать ее «модной».При нажатии форма падает, а стрелка поворачивается;однако вы можете заметить скачок в пикселях.Я просмотрел блочную модель несколько раз, и все пиксели складываются - я понятия не имею, откуда происходит этот скачок.Единственный способ остановить это - сделать стрелку абсолютной, но все равно не имеет смысла, почему именно это происходит, если в макете нет сдвига.Есть идеи?

https://codepen.io/mtbroomell/pen/zeMYdb

.ins {
  display: block;
  text-shadow: 
    20px 0 0 rgba(255,0,0,.6), 
    -20px 0 0 rgba(0,255,0,.6), 
    0 20px 0 rgba(0,0,255,.6);
  font-size: 200px;
  line-height:1;
  color: transparent;
  transform: rotate(0deg);
  transition: .5s;
}
.form-toggle:checked ~ .ins-wrap .ins {
    text-shadow: 
    0 0 0 rgba(0,0,0,.5), 
    0 0 0 rgba(0,0,0,.5), 
    0 0 0 rgba(0,0,0,.5);
    transition: .5s;
    transform: rotate(90deg);
}

^^^ Выше приведен пример стиля, поскольку я не могу публиковать CodePen без кода.

Ответы [ 2 ]

0 голосов
/ 16 февраля 2019

Я собираюсь предвосхитить это, сказав, что мне кажется, что на Macbook Pro 2017 с Chrome 72 он выглядит довольно гладко.браузер использовать поток графического процессора для визуализации элемента вместо процессора.Вы можете сделать это путем принудительного 3d-преобразования. 

.animatedElement {
   transform: translateZ(0);
}

Мерцания и скачки в Chrome и FF часто можно исправить с помощью backface-visibility и perspective.Не забудьте использовать префиксы браузера или инструмент сборки, который их добавляет. 

.animatedElement {
  backface-visibility: hidden;
  perspective: 1000;
}

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

0 голосов
/ 16 февраля 2019

Я не уверен, какова собственная частота кадров для анимации CSS, но она не достаточно быстра.В анимации минимальная частота кадров, необходимая для создания иллюзии плавного движения, составляет 24 кадра в секунду.Использование requestanimationframe () увеличит его до 60, но тогда вам понадобится JS.Я нашел эту статью на среде о гладкой анимации CSS.Может помочь?https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

...