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.
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.
No comments :
Post a Comment