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

Question

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

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/

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

Answer 1

Фоновое изображение не является свойством, которое можно анимировать - вы не можете анимировать свойство.

Вместо этого попробуйте расположить все изображения друг над другом, используя position: absolute, затем анимируйте непрозрачность всех их до 0, за исключением того, которое вы хотите многократно.

Answer 2

Работает в Chrome 19.0.1084.41 beta!

Так что в какой-то момент в будущем ключевые кадры могут действительно стать ... кадрами!

Вы живете в будущем;)

Answer 3

Это действительно быстро и грязно, но оно выполняет свою работу: jsFiddle

    #img1, #img2, #img3, #img4 {
    width:100%;
    height:100%;
    position:fixed;
    z-index:-1;
    animation-name: test;
    animation-duration: 5s;
    opacity:0;
}
#img2 {
    animation-delay:5s;
    -webkit-animation-delay:5s
}
#img3 {
    animation-delay:10s;
    -webkit-animation-delay:10s
}
#img4 {
    animation-delay:15s;
    -webkit-animation-delay:15s
}

@-webkit-keyframes test {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
    }
}
@keyframes test {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
    }
}

Я работаю над чем-то похожим для своего сайта, используя jQuery, но переход происходит, когда пользователь прокручивает страницу вниз - jsFiddle

Answer 4

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

JSFiddle моего решения в действии (обратите внимание, что в настоящее время он работает в Firefox, яЯ позволю вам добавить кроссбраузерные строки, пытаясь сохранить решение в чистоте от беспорядка)

Сначала я создал лист спрайта, который имел две рамки .Затем я создал div и поместил его в качестве фона, но мой div - только размер моего спрайта (100px).

<div id="cyclist"></div>

#cyclist {
    animation: cyclist 1s infinite steps(2);
    display: block;
    width: 100px;
    height: 100px;
    background-image: url('../images/cyclist-test.png');
    background-repeat: no-repeat;
    background-position: top left;
  }

Анимация настроена на 2 шага и весь процесс занимает 1секунда.

@keyframes cyclist {
  0% {
    background-position: 0 0; 
   }
  100% { 
    background-position: 0 -202px; //this should be cleaned up, my sprite sheet is 202px by accident, it should be 200px
   }
}

Тиаго выше упомянул функцию шагов , но я подумал, что подробнее остановлюсь на ней.Довольно простые и классные вещи.

Answer 5

Функция синхронизации linear будет анимировать определенные свойства линейно.Для фонового изображения этот эффект исчезает / изменяется при изменении кадров вашей анимации (не уверен, что это стандартное поведение, я бы пошел с подходом @Chukie B.)

Если вы используетеsteps функция, она будет анимироваться дискретно.Для получения более подробной информации см. Документацию по функции синхронизации на MDN .Для вашего случая сделайте так:

-webkit-animation-timing-function: steps(1,end);
animation-timing-function: steps(1,end);

Смотрите это jsFiddle .

Я тоже не уверен, что это стандартное поведение, но когда вы говорите, чтобудет только один шаг, это позволит вам изменить начальную точку в разделе @keyframes.Таким образом, вы можете определить каждый кадр вашей анимации.

Answer 6

У меня работает.Обратите внимание на использование background-image для перехода.

#poster-img {
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  overflow: hidden;
  -webkit-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
}

Answer 7

Как и выше, вы не можете изменить фоновые изображения в анимации. Я нашел лучшее решение, чтобы поместить ваши изображения в один лист спрайтов, а затем анимировать, изменив положение фона, но если вы создаете для мобильных устройств, ваши листы спрайтов ограничены менее чем 1900x1900 пикселей.

Answer 8

Мне нужно было сделать то же самое в последнее время.Вот простая реализация

#wrapper { width:100%; height:100%; position:relative; }
#wrapper img { position:absolute; top:0; left:0; width:100%; height:auto; display:block; }
#wrapper .top { animation:fadeOut 2s ease-in-out; animation-fill-mode:forwards; }
@keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}

<div id="wrapper">
  <img src="img1.jpg" class="top" style="z-index:2;">
  <img src="img2.jpg" style="z-index:1;">
</div>

Answer 9

Вы можете использовать анимированное свойство background-position и изображение спрайта.

Answer 10

Вы можете следовать по этому коду:

#cd{
  position: relative;
  margin: 0 auto;
  height: 281px;
  width: 450px;
}
#cf img{
  left: 0;
  position: absolute;
  -moz-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#cf img.top:hover{
  opacity: 0;
}

<div id="cf">
  <img class="button" src="Birdman.jpg" />
  <img src="Turtle.jpg" class="top" />
</div>