Posted By

Barlon on 11/13/11


Tagged

CSS3 transition


Versions (?)

CSS3 Transition


 / Published in: CSS
 

The transition instructions are attached to the normal state and therefore declared only once, then triggered on for eg. hover.

  1. /* Attach transition instructions - Long version */
  2. a.foo {
  3. background: #000;
  4. -webkit-transition-property: background
  5. -webkit-transition-duration: 0.3s;
  6. -webkit-transition-timing-function: ease;
  7. -webkit-transition-delay: 0.5s;
  8.  
  9. -webkit-transition: background 0.3s ease 0.5s; /* Can replace last 4 lines above */
  10. -webkit-transition: all 0.3s ease 0.5s; /* Transitioning all possible properties (color and backgrind in this case)*/
  11.  
  12. transition: background 0.3s ease 0.5s; /* Let's put this here since we hope one day transition will be standard */
  13. }
  14.  
  15. /* Attach transition instructions - Short version (showing 2 properties) */
  16. a.foo {
  17. background: #000;
  18. -webkit-transition: background 0.3s ease 0.5s, color 0.2s linear;
  19. }
  20.  
  21. /* Trigger the transition by hover or focus */
  22. a.foo:hover, a.foo:focus, a.foo:active {
  23. background: #CCC;
  24. color: #678;
  25. }

Report this snippet  

You need to login to post a comment.