CSS3 Transition

Use CSS3 transition to give action to elements in your website, such as change in colour, sizes, 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.

  1. CSS3 Transition (color)
  2. .my_class {
  3.   transition: color .2s ease-in;
  4. }
  5. .my_class:hover {
  6.   color:#066;
  7. }

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 -4 degrees using a transform transition.

  1. CSS3 Transition (transform)
  2. .my_class {
  3.   transition: transform .4s ease-in;
  4. }
  5. .my_class:hover {
  6.   transform: rotate(-4deg);
  7. }

This can be used to create a more interactive website, such as menu items or image gallery.

css transition

 

The Zen Elements CSS3 Series

Thank you for reading!
@zen