Advanced Search

CSS3 Transition

/ Published in: CSS
Save to your folder(s)
The transition instructions are attached to the normal state and therefore declared only once, then triggered on for eg. hover.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.