1. <body id="sample1">
  2. <div>
  3. <p id="a">margin-left<br>
  4. <span>transition: all 1s ease 0s</span></p>
  5. <p id="b">padding-left & color<br>
  6. <span>transition: all 1s ease-in 0s</span></p>
  7. <p id="c">text-indent & letter-spacing<br>
  8. <span>transition: all 1s ease-out 0s</span></p>
  9. <p id="d">left, background & box-shadow<br>
  10. <span>transition: all 1s ease-in-out 0s</span></p>
  11. </div>
  12. </body>
  1. /* :::::: sample1 :::::: */
  2. #sample1 p {
  3. font: 1em/1 monospace;
  4. }
  5. #sample1 p span {
  6. font-size: 0.75em;
  7. }
  8. #sample1 {
  9. position: relative;
  10. width: 100%;
  11. height: 200px;
  12. margin: 0 auto;
  13. background: url(../img/grid.gif) left top;
  14. }
  15. #sample1 div {
  16. padding: 10px;
  17. }
  18. #sample1 p {
  19. margin: 0;
  20. padding: 5px 0;
  21. color: #593869;
  22. cursor: default;
  23. white-space: nowrap;
  24. }
  25. #sample1 #c {
  26. letter-spacing: 0;
  27. }
  28. #sample1 #d {
  29. position: absolute;
  30. top: 9em;
  31. left: 0;
  32. padding: 3px 10px;
  33. }
  34. #sample1:hover #a {
  35. margin-left: 200px;
  36. }
  37. #sample1:hover #b {
  38. padding-left: 200px;
  39. color: red;
  40. }
  41. #sample1:hover #c {
  42. text-indent: 200px;
  43. letter-spacing: 5px;
  44. }
  45. #sample1:hover #d {
  46. left: 200px;
  47. background: white;
  48. box-shadow: 0 3px 5px rgba(0,0,0,0.3);
  49. }
  50. #sample1 #a {
  51. transition: margin 1s ease 0s;
  52. -webkit-transition: margin 1s ease 0;
  53. }
  54. #sample1 #b {
  55. transition: padding 1s ease-in 0s, color 1s ease-in 0s;
  56. -webkit-transition: padding 1s ease-in 0, color 1s ease-in 0;
  57. }
  58. #sample1 #c {
  59. transition: text-indent 1s ease-out 0s, letter-spacing 1s ease-out 0s;
  60. -webkit-transition: text-indent 1s ease-out 0, letter-spacing 1s ease-out 0;
  61. }
  62. #sample1 #d {
  63. transition: left 1s ease-in-out 0s, background 1s ease-in-out 0s, box-shadow 1s ease-in-out 0s;
  64. -webkit-transition: left 1s ease-in-out 0, background 1s ease-in-out 0, box-shadow 1s ease-in-out 0;
  65. }

margin-left
transition: all 1s ease 0s

padding-left & color
transition: all 1s ease-in 0s

text-indent & letter-spacing
transition: all 1s ease-out 0s

left, background & box-shadow
transition: all 1s ease-in-out 0s