please help with animations

[garciasanchezdaniel]

Hello friends, I'm fighting with animations, and I don't obtain that I want I have two divs, and this is the css code for these two divs:

@-webkit-keyframes div1{from {  opacity: 0.0;  font-size: 100%;}to {  opacity: 1.0;  font-size: 100%;}} #div1{  -webkit-animation-name: div1;  -webkit-animation-duration: 10s;  -webkit-animation-iteration-count: infinite;  -webkit-animation-timing-function: ease-in-out;  -webkit-animation-direction: alternate;}     @-webkit-keyframes div2{from {  opacity: 0.0;  font-size: 100%;}to {  opacity: 1.0;  font-size: 100%;}}#div2{  -webkit-animation-name: div2;  -webkit-animation-duration: 10s;  -webkit-animation-iteration-count: infinite;  -webkit-animation-timing-function: ease-in-out;  -webkit-animation-direction: alternate;  -webkit-animation-delay:18s;}

As you see, I make that 'div2' waits 18 seconds in order to 'div1' ends its animation....and after this, 'div1' will wait same time until 'div2' ends its animation I don't know if I explain well.....I want that each 18 seconds approximate, only one div will be displayed.......but I don't obtain do this, because both divs end overlayed Thanks in advance, Daniel

[thescientist]

I don't see a delay on div1. maybe JS might be a better way to handle this.

[garciasanchezdaniel]

I don't see a delay on div1. maybe JS might be a better way to handle this.

Is not possible only with css?Thanks for your help, Daniel

[amitamberker]

Hi garciasanchezdaniel,Could you please post (submit) your HTML Code?

[garciasanchezdaniel]

Hi creative 1977, of course! :good:This is the part of html code:

... <div id="div1">	    <jdoc:include type="module" name="custom_module1"/></div><div id="div2">	    <jdoc:include type="module" name="custom_module2"/></div>...

Best regards, Daniel