1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Смено ищображения на css

Главные вкладки

Аватар пользователя alex-litvinov alex-litvinov 5 декабря 2012 в 22:35

Здравствуйте возник вопрос по созданию изображений на сайте, возникла проблема по его настройки:
CSS:

[user=keyframes]keyframes[/user] cf4FadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#cf4a img:nth-of-type(1) {
  animation-delay: 6s;
}
#cf4a img:nth-of-type(2) {
  animation-delay: 4s;
}
#cf4a img:nth-of-type(3) {
  animation-delay: 2s;
}
#cf4a img:nth-of-type(4) {
  animation-delay: 0;
}

В блок закидываю код с пометкой Full HTML:

<div id="cf4" class="shadow">
  <img class="bottom" src=images/02.jpg">
  <img class="top" src="images/01.jpg">
</div>

Изображения не изменяются.
Информацию брал от сюда

Комментарии

Аватар пользователя sg85 sg85 5 декабря 2012 в 23:42

1 animation-delay(как и @keyframes) работает далеко не во всех браузерах(вообще он вроде должен работать в ie10 и... все, правда для движков вебкит(хром, сафари, яндекс) есть соответствующий костыль)
2 id в CSS не совпадают с id в HTML

т.е. Вы можете подправить ID и забить на это, через пару тройку лет оно само заработает, наверное Wink

Аватар пользователя Antoniy Antoniy 6 декабря 2012 в 0:43

Кейфрейм с именем анимации определен, да. Но потом, когда идет перечисление стилей для ID img, то имени анимации там уже нет. Оно и не должно анимироваться. По идее так..

Аватар пользователя Antoniy Antoniy 6 декабря 2012 в 0:58

Типа того:

@-webkit-keyframes namemyanimation {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@keyframes namemyanimation {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#cf4a img:nth-of-type(1) {
  -webkit-animation-name: namemyanimation;
  animation-name: namemyanimation;
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}
#cf4a img:nth-of-type(2) {
  -webkit-animation-name: namemyanimation;
  animation-name: namemyanimation;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
#cf4a img:nth-of-type(3) {
  -webkit-animation-name: namemyanimation;
  animation-name: namemyanimation;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
#cf4a img:nth-of-type(4) {
  -webkit-animation-name: namemyanimation;
  animation-name: namemyanimation;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}