CSS3 Анимации Въпроси - css, анимация, css3

Опитите да имате три елемента се появяват една след друга на страницата, но се случва следното.

Появяват се и трите елемента, първият елементне прави нищо (изглежда, че вече е преминало през неговата анимация) След това вторият елемент изчезва и след това започва анимацията и след това същото за третия елемент.

Ето моя код, какво липсва тук:

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

Благодаря предварително

Отговори:

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

.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/