CSS3 Animations Вопросы - PullRequest
Новая
       6

CSS3 Animations Вопросы

0 голосов
/ 03 июля 2011

Попытка отображения трех элементов один за другим на странице, но происходит следующее.

Появляются все три элемента, первый элемент ничего не делает (кажется, что он уже прошел анимацию). Затем второй элемент исчезает, а затем запускает анимацию и затем то же самое для третьего элемента.

Вот мой код, что мне здесь не хватает: 

@-webkit-keyframes reset {
    0% {opacity: 0;}
    100% {opacity: 0;}
}

@-webkit-keyframes fade-in {
0% { opacity: 0; -webkit-transform: scale(.1);}
85% {opacity: 1; -webkit-transform: scale(1.05);}
100% {-webkit-transform: scale(1);}
}


.fade-in {
    -webkit-animation-name: reset, fade-in;
    -webkit-animation-duration: .5s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
}

.fade-in.one {-webkit-animation-delay: 0, .5;}
.fade-in.two {-webkit-animation-delay: 0, 1.5s;}
.fade-in.three {-webkit-animation-delay: 0, 2.5s;}

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

1 Ответ

2 голосов
/ 04 июля 2011

Основная проблема с вашим кодом заключается в том, что вам не хватает единицы времени ... 

.fade-in.one {-webkit-animation-delay: 0, .5s;}

Во время тестирования вашего кода я позволил себе немного упростить его.Нет необходимости иметь две отдельные анимации, есть небольшое известное свойство, называемое -webkit-animation-fill-mode, которое позволит вашей анимации оставаться в своем последнем состоянии.Вот моя измененная версия: 

@-webkit-keyframes fade-in {
    0% { opacity: 0; -webkit-transform: scale(.1);}
    85% {opacity: 1; -webkit-transform: scale(1.05);}
    100% {-webkit-transform: scale(1); opacity: 1;}
}

.fade-in {
  -webkit-animation: fade-in .5s ease-in;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  opacity: 0;
}

.fade-in.one {-webkit-animation-delay: .5s;}
.fade-in.two {-webkit-animation-delay: 1.5s;}
.fade-in.three {-webkit-animation-delay: 2.5s;}

Вы можете проверить это здесь:

http://jsfiddle.net/vqfj7/

...