Как улучшить производительность этой CSS-анимации?

Я использую Chrome и чистую pulse анимацию CSS.

.pulse {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background-color: #53A653;
  border-radius: 100%;  
  -webkit-animation: scaleout 3.0s infinite ease-in-out;
  animation: scaleout 3.0s infinite ease-in-out;
}



@-webkit-keyframes scaleout {
  0% { -webkit-transform: scale(0.0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

Вот jsfiddle.

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

Действительно ли CSS-анимация такая медленная? или мой CSS просто очень плохой? Как повысить его производительность?


html css css-animations
person Jackson Tale    schedule 05.05.2015    source источник
comment
Эта анимация настолько хороша, насколько это возможно, имхо. Вы уверены, что проблема именно в этом?   -  person jbutler483    schedule 05.05.2015
comment
Не уверен в точной проблеме. Просто убедитесь, что в вашем браузере включено аппаратное ускорение: stackoverflow.com/questions/26356769/   -  person Kalpesh Patel    schedule 05.05.2015
comment
@kalpeshpatel да, аппаратное ускорение включено, судя по предоставленному вами сообщению.#   -  person Jackson Tale    schedule 05.05.2015
comment
@ jbutler483 Да, я очень уверен. Если я открою этот jsfiddle в своем вопросе, Chrome станет медленным, действительно заметно медленным.   -  person Jackson Tale    schedule 05.05.2015
comment
на моем он отлично работает ... Глупое предложение: вы пытались закрыть хром (также фоновый процесс) и снова открыть его? если это не решит эту проблему, попробуйте жестко удалить кеш, может быть? Это трудно, потому что я сказал, что на моем он работает более чем хорошо ..   -  person Nick    schedule 05.05.2015
comment
@Nick Да, я пробовал, не помогло. Это потому, что моя графическая карта -Nvidia Quadro NVS 295 плохая? Мой процессор i7-2600S 2.8GHz   -  person Jackson Tale    schedule 06.05.2015
comment
@kalpeshpatel, как я могу заставить использовать GPU, как сказано здесь blog.teamtreehouse.com/   -  person Jackson Tale    schedule 06.05.2015
comment
@JacksonTale может вам помочь: urbaninsight.com/2013/01/04/ и davidwalsh.name/translate3d. Хотя я не пробовал.   -  person Kalpesh Patel    schedule 06.05.2015
comment
@kalpeshpatel, да, пытался, не очень помогло. еще немного мерцает   -  person Jackson Tale    schedule 06.05.2015

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте изменить продолжительность анимации на 1 с:

.pulse {width: 20px; height: 20px; vertical-align: middle;background-color: #53A653; border-radius: 100%; -webkit-animation: scaleout 1.0s infinite ease-in-out; animation: scaleout 1.0s infinite ease-in-out;}

РЕДАКТИРОВАТЬ: я забыл прочитать строку, в которой говорится, что ваша прокрутка стала короткой. Попробуйте использовать Firefox (глупое предложение). Если нет, то это, скорее всего, только ваш компьютер.

person Pizza Day    schedule 07.05.2015
comment
Ваша анимация работала очень гладко на моей стороне. Хорошая анимация, кстати. - person Pizza Day; 07.05.2015