MyBB Community Forums

This tutorial will lead you towards creating your own CSS3 transitions. These are great ways to make fancy effects and your website nicer.

Lets start off:

transition

is the property. Of course you will need to apply browser compatibility "prefixes" to the property. These are -moz-, -webkit-, -o- and -khtml-.

Next is the time the transition will last. These are represented in decimal second intervals. My favorite is .2s but of course you can easily modify that to shorter or faster animations you want.

A example of the code we have so far is:

-webkit-transition: all(property it applies to) .2s(time);

Finally, we need to add an animation type. There are:

• cubic-bezier
  
• ease
  
• ease-in
  
• ease-out
  
• ease-in-out
  
• linear
  

The next example:

-webkit-transition: all .2s ease-in-out;

If you would like the animation to only apply it to one property your code will look like this:

-webkit-transition: color .2s ease-in-out;

That's about it sadly! If you would like more information don't hesitate to post below and I will surely help you.

Thanks for reading!

So the transition is apply only to property values (color, font-size)?

And not properties (p, div, span)?

(2011-09-27, 12:28 AM)Sama34 Wrote: [ -> ]So the transition is apply only to property values (color, font-size)?

And not properties (p, div, span)?

No, it applies to many types of properties.

View this blog post and scroll down to "What Can Be Transitioned?" and find out what types of properties you can transition.

For example to your div question, you would write your code like this.

#sama {
     background: red;
     -webkit-transition: background .2s ease-in-out;
}

#sama:hover {
     background: blue;
}

For example check this demo.

Thanks! bookmarked

(2011-09-27, 01:03 AM)Everett777 Wrote: [ -> ]Thanks! bookmarked

No problem! Glad you like it.

Alright then, thanks, this is the second css related thing I learn this month, the past one was last-child.

I don't fully understand it, but practicing is always my way

(2011-09-27, 01:12 AM)Sama34 Wrote: [ -> ]Alright then, thanks, this is the second css related thing I learn this month, the past one was last-child.

I don't fully understand it, but practicing is always my way

Let's see if I can explain this by reading on it for a minute or two.

Say I have a div, this div has two paragraph's in it (<p>).

Now, say I would like to make the first paragraph text red. I would do something like this:

#sama p:first-child {
     color: red;
}

Then the second paragraph bold:

#sama p:last-child {
     font-weight: bold;
}

(2011-09-27, 12:34 AM)Jason L. Wrote: [ -> ]For example check this demo.

OMAIGAWD MAI EYES!!!

Nice tutorial man

(2011-09-27, 01:33 AM)lucasbytegenius Wrote: [ -> ]

(2011-09-27, 12:34 AM)Jason L. Wrote: [ -> ]For example check this demo.

OMAIGAWD MAI EYES!!!

Nice tutorial man

Thanks Luke!

Yes I know, and if there are three divs, the middle one will have the normal formating.

It is just that sometimes :first-child and :last-child don't do what I want they to do

table tr:first-child td:last-child{
color:red;
}