advanced code snippet search

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

Expand | Embed | Plain Text 
  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.