CSS3 анимация задерживает выпуск

Question

CSS3 анимация задерживает выпуск

0

У меня есть три изображения в моем html файле, которые я хочу масштабировать по одному. Я попытался разместить эти задержки: -moz-animation-delay: -2s; и animation-delay:2s; в ID #animation-container2 и #animation-container3. Все изображения все еще масштабируются одновременно. Что я делаю неправильно?

Html

<div id="splashPage">
     <ul>
     <li>   <img src="images/vintage.png" alt="Vintage" id="animation-container"> <li>
     <li>   <img src="images/computers.png" alt="Computer" id="animation-container2"> <li>
     <li>   <img src="images/online.png" alt="Online" id="animation-container3" > <li>
     </ul>
     <img src="images/enter.gif" alt="enter" id="enterClick"> 
    </div>

CSS:

#animation-container {
  animation: inout 2s;
  animation-iteration-count: 1;
  -webkit-animation: inout 3s; /* Safari & Chrome */
  margin: auto;
}
@keyframes inout {
  25%   { transform: scale(2, 2); }
}
#animation-container2 {
  -moz-animation-delay: 5s;
  animation: inout 2s;
  animation-iteration-count: 1;
  -webkit-animation: inout 3s; /* Safari & Chrome */
  margin: auto;
}
@keyframes inout {
  25%   { transform: scale(2, 2); }
}
#animation-container3 {
  -moz-animation-delay: 10s;
  animation: inout 2s;
  animation-iteration-count: 1;
  -webkit-animation: inout 3s; /* Safari & Chrome */
  margin: auto;
}
@keyframes inout {
  25%   { transform: scale(2, 2); }
}

DMS 20 окт. 2013, в 08:55

Источник

0

Как вы запускаете анимацию? Почему бы не запустить 2-ю анимацию, когда первая закончится? и так далее?
jfriend00 20 окт. 2013, в 06:02
0

1. Можете ли вы создать http://jsfiddle.net/ ? 2. Вы определяете анимацию inout три раза (одного должно быть достаточно).
Inkbug 20 окт. 2013, в 06:02
0

с jsfiddle Какой лучший способ загрузить изображения?
DMS 20 окт. 2013, в 06:24
0

@DMS Вы можете использовать фиктивные изображения из чего-то вроде dummyimage.com
Inkbug 20 окт. 2013, в 06:32
0

@Inkbug jsfiddle.net/vrLUc/1 jsfiddle.net/vrLUc/1/embedded/result в jsfiddle не масштабируется вообще
DMS 20 окт. 2013, в 06:48

Показать ещё 3 комментария

Теги:

html

css3

css-animations

delay

1 ответ

Ещё вопросы

Как вы запускаете анимацию? Почему бы не запустить 2-ю анимацию, когда первая закончится? и так далее?
1. Можете ли вы создать http://jsfiddle.net/ ? 2. Вы определяете анимацию inout три раза (одного должно быть достаточно).
с jsfiddle Какой лучший способ загрузить изображения?
@DMS Вы можете использовать фиктивные изображения из чего-то вроде dummyimage.com
@Inkbug jsfiddle.net/vrLUc/1 jsfiddle.net/vrLUc/1/embedded/result в jsfiddle не масштабируется вообще

Inkbug · Accepted Answer · 2013-10-20T06-34-00.000Z

Вот несколько новых и более простых CSS, которые должны работать:

#animation-container {
  animation: inout 2s 0s 1;
  -webkit-animation: inout 2s 0s 1;
  margin: auto;
}
#animation-container2 {
  animation: inout 2s 5s 1;
  -webkit-animation: inout 2s 5s 1;
  margin: auto;
}
#animation-container3 {
  animation: inout 2s 10s 1;
  -webkit-animation: inout 2s 10s 1;
  margin: auto;
}
@keyframes inout {
  25%   { transform: scale(2, 2); }
}
@-webkit-keyframes inout {
  25%   { -webkit-transform: scale(2, 2); }
}

Смотрите скрипку.