Animation css

@fajjet · Регистрация: 16.01.2014

Author24 — интернет-сервис помощи студентам

Недоделанная вещь это анимация...

Задаешь несколько анимаций разных элементов, например, 6 букв должны вылетать откуда-либо. И проблема возникает именно с параметром delay. Если у всех элементов он одинаковый - никаких проблем. Но если разный - то первые две-три анимации работают, остальные нет.

Вот пример:

CSS

#el_1
{
-prefix-animation: name 0.5s linear 0.2s;
}
 
@-prefix-keyframes name
{
0%{Что-там: 0;}
 
100%{Что-там:1 ;}
}
 
Если плодить такие элементы ^, только с делаем +0.2 в каждом случае, то ломается анимация. Лишь часть воспроизводится, другая - нет.

z-z · 06.09.2014, 10:31

прошу прощения за возможную глупость, но #el_1 - это обозначение айди, который на странице повторяться никак не должен. Возможно вы пишете несколько элементов с одним айди, поэтому и косяки случаются?

@fajjet · 06.09.2014, 16:33 **[ТС]**

нет. Я пишу каждый элемент отдельно. Соответственно и анимацию к каждому элементу свою. Дело именно в delay. Не знаю только как решить проблему, хотя есть мысль насчет продления времени выполнения и в каждом новом случае начинать допустим с +10%. Но это как-то криво будет.

@monochromer · 06.09.2014, 18:51

Нужно смотреть полный код - может, там есть неточности
Вот рабочий пример
http://jsbin.com/foner/2/edit?html,css,output

CSS

.box {
  width: 50px;
  height: 50px;
  background: #aaa;
  border-radius: 50%;
  
  position: relative;
  left: 0;
 
  -webkit-animation: anim 1s infinite;
  animation: anim 1s infinite;
}
 
.box-alt {
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}
 
@-webkit-keyframes anim {
  0% {
    left: 0;
  }
  100% {
    left: 50px;
  }
}
 
@keyframes anim {
  0% {
    left: 0;
  }
  100% {
    left: 50px;
  }
}

@fajjet · 06.09.2014, 22:05 **[ТС]**

CSS

.letter_one
{
-webkit-animation:hhh 0.5s linear .2s;
}
 
.letter_two
{
-webkit-animation:hhh 0.5s linear .4s;
}
 
.letter_three
{
-webkit-animation:hhh 0.5s linear .6s;
}
 
.letter_four
{
-webkit-animation:hhh 0.5s linear .8s;
}
 
.letter_five
{
-webkit-animation:hhh 0.5s linear 1s;
}
 
.letter_six
{
-webkit-animation:hhh 0.5s linear 1.2s;
}
 
@-webkit-keyframes hhh
{
    0%{transform: rotateY(360deg);}
    
    100%{transform: rotateY(0deg)}
}

HTML5

<span class="letter_one">f</span>
<span class="letter_two">4</span>
<span class="letter_three">1</span>
<span class="letter_four">1</span>
<span class="letter_five">3</span>
<span class="letter_six">7</span>

Убрать delay и все работает

Добавлено через 47 минут
Нашел точную проблему. Оказывается если ставить duration > delay = ERROR. Если время действия анимации меньше задержки перед анимацией, то все нормально. ВОТ СКАЖИТЕ мне, что это???

Добавлено через 4 минуты
Кстати говоря, нашел ответ.

CSS

@-webkit-keyframes tit1
{
0%{transform: translateX(-1000px);}
 
50%{transform: translateX(-1000px);}
 
100%{transform: translateX(0px);}
}

Можно таким способом задавать задержку, не прибегая к этому свойству.

@monochromer · 07.09.2014, 04:51

Не знаю, что у вас с браузером, но я тестировал ваш пример в последних версиях Chrome и Firefox - работатет нормально (с задержками).

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	06.09.2014, 10:31	2
	прошу прощения за возможную глупость, но #el_1 - это обозначение айди, который на странице повторяться никак не должен. Возможно вы пишете несколько элементов с одним айди, поэтому и косяки случаются? 0

@fajjet 3 / 3 / 2 Регистрация: 16.01.2014 Сообщений: 125
	06.09.2014, 16:33 [ТС]	3
	нет. Я пишу каждый элемент отдельно. Соответственно и анимацию к каждому элементу свою. Дело именно в delay. Не знаю только как решить проблему, хотя есть мысль насчет продления времени выполнения и в каждом новом случае начинать допустим с +10%. Но это как-то криво будет. 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	07.09.2014, 04:51	6
	Не знаю, что у вас с браузером, но я тестировал ваш пример в последних версиях Chrome и Firefox - работатет нормально (с задержками). 0