Posted By

reynish on 02/11/11


Tagged

css animation CSS3 transition vendor-prefix


Versions (?)

CSS3 Animation


 / Published in: CSS
 

URL: http://blog.typekit.com/2011/02/10/type-study-an-all-css-button/

Adapted from the the link but using longhand transition properties

  1. .textButton {
  2. border: 1px solid #000;
  3. border-radius: 20px;
  4. position: relative;
  5. top: 0px;
  6. -webkit-box-shadow: 0 5px 0px #000, 0 5px 10px #000;
  7. -moz-box-shadow: 0 5px 0px #000, 0 5px 10px #000;
  8. -o-box-shadow: 0 5px 0px #000, 0 5px 10px #000;
  9. box-shadow: 0 5px 0px #000, 0 5px 10px #000;
  10. /* Properties you want to animate */
  11. -webkit-transition-property: top, -webkit-box-shadow;
  12. /* Duration of animation */
  13. /* You can define different durations for each property. Seperate with commas */
  14. -webkit-transition-duration: .1s;
  15. /* Animation style */
  16. /* You can define different timings for each property. Seperate with commas */
  17. -webkit-transition-timing: ease-in-out;
  18. -moz-transition-property: top, -moz-box-shadow;
  19. -moz-transition-duration: .1s;
  20. -moz-transition-timing: ease-in-out;
  21. -o-transition-property: top, -o-box-shadow;
  22. -o-transition-duration: .1s;
  23. -o-transition-timing: ease-in-out;
  24. transition-property: top, box-shadow;
  25. transition-duration: .1s;
  26. transition-timing: ease-in-out;
  27. }
  28.  
  29. .textButton:hover {
  30. top: 2px;
  31. -webkit-box-shadow: 0 2px 0px #000, 0 2px 5px #000;
  32. -moz-box-shadow: 0 2px 0px #000, 0 2px 5px #000;
  33. -o-box-shadow: 0 2px 0px #000, 0 2px 5px #000;
  34. box-shadow: 0 2px 0px #000, 0 2px 5px #000;
  35. -webkit-transition-property: top, -webkit-box-shadow;
  36. -webkit-transition-duration: .1s;
  37. -webkit-transition-timing: ease-in-out;
  38. -moz-transition-property: top, -moz-box-shadow;
  39. -moz-transition-duration: .1s;
  40. -moz-transition-timing: ease-in-out;
  41. -o-transition-property: top, -o-box-shadow;
  42. -o-transition-duration: .1s;
  43. -o-transition-timing: ease-in-out;
  44. transition-property: top, box-shadow;
  45. transition-duration: .1s;
  46. transition-timing: ease-in-out;
  47. }

Report this snippet  

You need to login to post a comment.