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

Ответ 1

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

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

Ответ 2

Он работает в Chrome 19.0.1084.41 beta!

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

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

Ответ 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

Ответ 4

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

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

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

Смотрите jsFiddle.

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

Ответ 5

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

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
   }
}

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

Ответ 6

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

Ответ 7

Работает для меня. Обратите внимание на использование 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;
}

Ответ 8

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

#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>

Ответ 9

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

Ответ 10

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

#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>

Ответ 11

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