Блог

Главная - Вопросы по программированию - Увеличить скорость анимации css3

Увеличить скорость анимации css3

#css #animation

#css #Анимация

Вопрос:

 .bg-grass{
width: 100%; 
height: 290px; 
background-size: :100%;
background-image: url(../graphic/background/001.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 20s linear infinite;
-ms-animation: animatedBackground 20s linear infinite;
-moz-animation: animatedBackground 20s linear infinite;
-webkit-animation: animatedBackground 20s linear infinite;

}

 .grass-speed2{
animation: animatedBackground 5s linear infinite;
-ms-animation: animatedBackground 5s linear infinite;
-moz-animation: animatedBackground 5s linear infinite;
-webkit-animation: animatedBackground 5s linear infinite ;

}

У меня есть два класса css, один из которых должен иметь обычную анимацию, а другой — ускорить ее. Сценарий будет заключаться в том, что в определенное время класс grass-speed2 будет добавлен в bg-grass, чтобы ускорить скорость. Он отлично работает в Firefox, но не работает в Chrome. Не уверен, почему. Также есть ли способ заставить его продолжать, в какой фоновой позиции он находится в данный момент, когда скорость увеличивается?

ПРАВКА 1

Я забыл добавить в ключевой кадр css

 @keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }

}

Ответ №1:

Это может быть лучше обработано с помощью ключевых кадров анимации. Вместо того, чтобы использовать разные классы, попробуйте, возможно, использовать разные проценты в ключевых кадрах в сочетании с секундами. Вот пример использования top . Конечно, вы можете заменить это (или добавить больше) более подходящим типом анимации.

 @keyframes animatedTop {
    0% {
        top: 0;
    }
    90% {
        top: 5px;
    }
    100% {
        top: 8px;
    } 
}

Не забудьте включить префиксы.

 /* @-webkit-
   @-moz-
   @-o-
*/

И вы можете вызвать свою анимацию с помощью.

 .myClass {
    animation: animatedTop 15s;
}

Комментарии:

1. привет, Линдей, у меня уже есть ключевой кадр, который я только что обновил. Итак, вы предлагаете мне сделать несколько ключевых кадров, чтобы ускорить скорость?

2. Привет @lilsizzo! Я бы предложил создать один класс анимации, а затем использовать несколько ключевых кадров (у вас может быть столько, сколько 0% — 100% [таким образом, это может быть 1%, 2% и т.д.]), Чтобы отрегулировать время. Кроме того, я раньше не пробовал создавать ключевой кадр, который встречается от 0,01% до 0,1%. Возможно, этот метод может привести к еще большей медлительности.

Ответ №2:

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

 @-webkit-keyframes animatedBackground{...}
@-moz-keyframes animateBackground{...}
@-o-keyframes animateBackground{....}

Возможно, это может решить вашу проблему.

Наслаждайтесь анимацией ключевых кадров css!

Метки: