Блог

Главная - Вопросы по программированию - Переходная позиция CSS3

Переходная позиция CSS3

#html #animation #css

#HTML #Анимация #css

Вопрос:

Итак, я реализовал переход CSS3 для прокрутки широкого изображения по экрану, используя этот код

     animation-name:scrolling;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @keyframes scrolling
    {    
        0%   { background-position: 0% 0%; }
        100% { background-position: -2000px 0%; }
    }

Работает нормально, но через 20 секунд он возвращается к началу, есть ли у кого-нибудь идеи, как я могу постоянно прокручивать его, не возвращаясь к началу через 20 секунд. Если бы я отрегулировал длительность, это просто замедлило бы прокрутку, а затем перескочило бы после длительности.

Также вы знаете, как я могу приостановить анимацию с помощью события наведения?

Спасибо

Ответ №1:

Просто добавьте еще один ключевой кадр в середине с полной позицией (при условии, что вы хотите, чтобы bg вернулся туда, откуда он пришел, если нет, просто установите для него значение -4000px)

  @keyframes scrolling
    {    
        0%   { background-position: 0% 0%; }
        50% { background-position: -2000px 0%; }
        100% { background-position: 0% 0%; }
    }

Должно сработать 🙂

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

1. Это хорошо, но я хотел, чтобы изображение бесконечно прокручивалось влево. Ваш код будет просто перемещаться слева направо, не так ли? Спасибо за помощь, хотя

2. Да, но если вы измените последний ключевой кадр на -4000px, он вернется к первой позиции, а затем снова прокручивается (я надеюсь).