CSS3 Transition
Use CSS 3 transition to give action to elements in your website, such as change in colour, motion and more!
CSS3 Transition
The basic syntax for creating a css transition is “property”, “duration”, and “type”.
If we take the following example (transition:color 1s ease-in;) – the property we are changing is the color, over a duration of 1 second and using the ease-in method). See below some examples of how this can be implemented into your projects.
CSS3 Colour Transition Example
Mouse over this example paragraph to see it fade to a new colour using a basic CSS3 transition.
- CSS3 Transition (color)
- .my_class {
- transition: color .5s ease-in;
- -moz-transition: color .5s ease-in;
- -o-transition: color .5s ease-in;
- -webkit-transition: color .5s ease-in;
- }
- .my_class:hover {
- color:#066;
- }
This is a good technique for creating mouseover actions for links and buttons.
CSS3 Motion Transition Example
Mouse over this example paragraph to see it rotate 7degrees using a transform transition.
- CSS3 Transition (transform)
- .my_class {
- transition: transform .5s ease-in;
- -moz-transition: -moz-transform .5s ease-in;
- -o-transition: -o-transform .5s ease-in;
- -webkit-transition: -webkit-transform .5s ease-in;
- }
- .my_class:hover {
- transform: rotate(7deg);
- -moz-transform: rotate(7deg);
- -o-transform: rotate(7deg);
- -webkit-transform: rotate(7deg);
- }
This can be used to create a more interactive website, such as menu items or image gallery.
The Zen Elements CSS3 Series
- CSS3: Introduction
- CSS3: Border Image
- CSS3: Border Color
- CSS3: Border Radius
- CSS3: Box Shadow
- CSS3: Font Face
- CSS3: Gradients
- CSS3: HSL & HSLA
- CSS3: Multiple Column
- CSS3: Multiple Images
- CSS3: Opacity
- CSS3: RGB & RGBA
- CSS3: Text Shadow
- CSS3: Transform
- CSS3: Transition
Thank you for reading!
@zenelements // alex
Thank you for this quite reference. However, it seems that there is an error in the motion transition example. The code should really be,
.my_class {
transition: -webkit-transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
Thank you, Dean! You’re quite right and this must have been a result of a long day and too little caffeine.
Thank you Zen Elements for simple examples of CSS 3 uses!
Great little resource, we will be back for more!
We’ve added you to a post on our blog.
All the best,
Andy
Big Eye Deers, Cardiff
Thanks for good lessons about CSS3.
Thanks for this excellent summary.