CSS3 Прыжки Положение - PullRequest
Новая
       5

CSS3 Прыжки Положение

2 голосов
/ 11 ноября 2011

Итак, я реализовал переход 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 с. Если бы я настроил длительность, это бы просто замедлило прокрутку, а затем прыгнуло после продолжительности.

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

Спасибо

1 Ответ

0 голосов
/ 11 ноября 2011

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

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

Должен сделать трюк:)

...