3 replies [Last post]
exoskeletor
exoskeletor's picture
Offline
newbie
Ελλάδα
Last seen: 7 years 15 weeks ago
Ελλάδα
Timezone: GMT+3
Joined: 2011-07-22
Posts: 7
Points: 11

i have this template http://t2themes.com/themes/workout/demo and im trying to animate a div the way the site animates every element, article etc but i cant find the correct code. If i use this code:

div.anim {
-webkit-animation: flipInX 1.2s 0s ease forwards;
-moz-animation: flipInX 1.2s 0s ease forwards;
-o-animation: flipInX 1.2s 0s ease forwards;
animation: flipInX 1.2s 0s ease forwards;
opacity: 0; }

my div animated but it animates on page load. i want to be animated when it will apeear on screen like the PROGRAMS section on the demo. Also i want to do this on 6 divs and with my code they all animate the same time, i want the animation to be like in the demo, one at a time

How i can do that?

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 6 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Well your code is correct,

Well your code is correct, but it indeed will take all divs at the same time.
Usually if you want to edit different kind of divs you need to give the div a class of an ID.

For example you have two different kind of divs
The first div has a class called: one
The second div has a class called: two

This is how it would look like in HTML:

<div class="one">_</div>
<div class="two">_</div>

Okay and your CSS will then look like this:

div .one {
-webkit-animation: flipInX 1.2s 0s ease forwards;
-moz-animation: flipInX 1.2s 0s ease forwards;
-o-animation: flipInX 1.2s 0s ease forwards;
animation: flipInX 1.2s 0s ease forwards;
opacity: 0; }
 
div two {
-webkit-animation: flipInX 1.2s 0s ease forwards;
-moz-animation: flipInX 1.2s 0s ease forwards;
-o-animation: flipInX 1.2s 0s ease forwards;
animation: flipInX 1.2s 0s ease forwards;
opacity: 0; }

Now you have two different kind of divs with both of them having their own class.
By using this clas inside your css you can set them up seperately.

Hope this helps.

Check Maximum Webdesign for your online solutions

exoskeletor
exoskeletor's picture
Offline
newbie
Ελλάδα
Last seen: 7 years 15 weeks ago
Ελλάδα
Timezone: GMT+3
Joined: 2011-07-22
Posts: 7
Points: 11

it helped thanks and with the

it helped thanks and with the help of this code http://jsfiddle.net/tcloninger/e5qaD/ i can do what i want, which is to start the animation when the div appears. (with javascript i will find when the div appears and i will apply to it a class that has the desired css)
Im still having thought on how i will animate 3 divs in a row with a delay of 500ms. i want to animate the first div, then the second, then the third etc.
It is a good approach to give them 3 different id's and to set a delay like this setTimeout(function(){/*Code*/},500); after each animation? is there a better way to do this? with this approach maybe i will slow down my page?

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 6 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

I don't think it eats much

I don't think it eats much time, as long as the files are small the rendering will do its work.
The most time is taken by downloading, js files instead of rendering the website.

Check Maximum Webdesign for your online solutions