Изменение фонового изображения с помощью анимации CSS3 - PullRequest
Новая
       14

Изменение фонового изображения с помощью анимации CSS3

27 голосов
/ 06 сентября 2011

Почему это не работает?Что я делаю не так?

CSS 

@-webkit-keyframes test {
  0% {
    background-image: url('frame-01.png');
  }
  20% {
    background-image: url('frame-02.png');
  }
  40% {
    background-image: url('frame-03.png');
  }
  60% {
    background-image: url('frame-04.png');
  }
  80% {
    background-image: url('frame-05.png');
  }
  100% {
    background-image: url('frame-06.png');
  }
}

div {
  float: left;
  width: 200px;
  height: 200px;
  -webkit-animation-name: test;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: linear;
}

DEMO

http://jsfiddle.net/hAGKv/

Заранее спасибо!

Ответы [ 11 ]

0 голосов
/ 06 ноября 2012

Ну, я могу изменить их в хром. Он прост и отлично работает в Chrome, используя свойства -webkit css.

Страница:
...