CSS3 анимация меняет фоновое изображение без скольжения - PullRequest
Новая
       1

CSS3 анимация меняет фоновое изображение без скольжения

0 голосов
/ 07 марта 2012

Это текущий код, который у меня есть 

.jack_hitting{
        -moz-animation: jackhitting 0.5s infinite;
    }

    @-moz-keyframes jackhitting {  
        0% {  
          background-position: -8px -108px;
        } 

        20% {  
          background-position: -41px -108px;
        }

        40% {  
          background-position: -73px -108px;
        }

        60% {  
          background-position: -105px -108px;
        }

        80% {  
          background-position: -137px -108px;
        }

        100% {  
          background-position: -8px -108px;
        }
    }

, и это циклически перемещает фоновое изображение, переходящее к следующему, но я бы предпочел, чтобы оно не скользило, так что оно в основном работает как следующий код js: 

document.getElementById('id').style.backgroundPosition='-8px -108px';

Есть ли эффект, который может делать то, что я хотел бы?

Заранее спасибо:)

1 Ответ

1 голос
/ 07 марта 2012

Я думаю, что нашел это: пошаговый старт (я думаю, что это один из нескольких, который мог бы сделать это в категории animation-timer-function ) 

animation: jackhitting 10s step-start infinite;

Длинная форма будет 

animation-name: jackhitting;
animation-duration:    10s;
animation-timing-function: step-start;
animation-iteration-count:    infinite;

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

Вот скрипка, чтобы проверить это: http://jsfiddle.net/Ym6b5/4/ (div слишком велик. Я хотел, чтобы вы увидели, как движется фоновое изображение, и посмотрите, что вам нужно)

animation-duration - это общее количество времениэто займет, чтобы пройти через ваши ключевые кадры. задержка анимации , которую я считал задержкой между шагами, - это задержка до запуска анимации.http://dev.w3.org/csswg/css3-animations

Надеюсь, это то, что вы искали.Ура, iso

...