css - CSS3 Animations Questions -


trying have 3 elements show 1 after other on page following happens.

all 3 elements appear, first element doesn't (it appears have gone through it's animation) second element disappears , starts it's animation , same thing third element.

here's code, missing here:

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

thanks in advance

the main problem code missing time unit...

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

while testing code took liberty simplify bit. there no need have 2 separate animations, there little known property called -webkit-animation-fill-mode allow animation remain in last state. here refactored version:

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

you can check out here:

http://jsfiddle.net/vqfj7/


Comments

Post a Comment

Popular posts from this blog

c++ - Is it possible to compile a VST on linux? -

for class project i'm attempting write vst plugin backed cuda. current cuda workflow on linux box, i'd prefer compile , link there. according wikipedia , should possible (i couldn't find steinberg documentation relevant linux) can't find makefile or instructions on how build if aren't using xcode or visual studio. i'm vst 3 sdk doesn't support linux. when try compile plugin under linux, error: ./base/source/fatomic.cpp:39:30: fatal error: libkern/osatomic.h: no such file or directory this issue caused following code in "vst3 sdk/base/source/fatomic.cpp" #if mac #include <libkern/osatomic.h> #if mac_os_x_version_min_required > mac_os_x_version_10_4 #define native_atomic_type (volatile int32_t*) #else #define native_atomic_type (int32_t*) #endif #elif windows #include <windows.h> #endif but hope compiling under linux work vst sdk 2.4. reading. jvstwrapper seems run on lin...
Read more

java - Output of Eclipse is rubbish -

i want write program in eclipse language different english. when display output using system.out program, displays output correctly in console editor. when accept input console , output it, output rubbish. how can solve it. many thnaks i'm not sure if problem, have character encoding problem. make sure you're using unicode, utf-8. you can read more @ official docs converting non-unicode text .
Read more

jquery - Confused with JSON data and normal data in Django ajax request -

i read json internet still have not got grasp of it. reading article http://webcloud.se/log/ajax-in-django-with-jquery/ i not understood first part function using json def xhr_test(request, format): if request.is_ajax(): if format == 'xml': mimetype = 'application/xml' if format == 'json': mimetype = 'application/javascript' data = serializers.serialize(format, examplemodel.objects.all()) return httpresponse(data,mimetype) # if want prevent non xhr calls else: return httpresponse(status=400) my main problems are from function getting format variable does format json mean data given function json or data recived json can give me simple example ouput of function data = serializers.serialize(format, examplemodel.objects.all()) how use data when response in jquery function if don't use json in above function how input , response chnage thanks ...
Read more