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:
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:
Finally, we need to add an animation type. There are:
The next example:
If you would like the animation to only apply it to one property your code will look like this:
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!
Lets start off:
Code:
transitionis 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:
Code:
-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:
Code:
-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:
Code:
-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!
