Squash & Squeeze Animation

Using Slash Syntax CSS

by Ian Field-Richards © 2014 - FREE TO USE

  1. <!-- html -->
  2. <div class="wrapper">
  3. <div id="ball" class="bounceMe"></div>
  4. <div id="shadow"><span class="shadowMe"></span></div>
  5. </div>

  1. /* css */
  2. .wrapper {
  3. width: 100%;
  4. height: 550px;
  5. text-align: center;
  6. position: relative;
  7. margin: 0 auto;
  8. text-align: center;
  9. }
  10. #ball {
  11. background: #a90329; /* Old browsers */
  12. background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  13. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  14. background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  15. background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
  16. background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
  17. background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
  18. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
  19. display: block;
  20. height: 50px;
  21. width: 100px;
  22. border-radius: 100px / 50px;
  23. position: relative;
  24. top: 50px;
  25. margin: 0 auto;
  26. z-index: 100;
  27. }
  28. #shadow {
  29. position: absolute;
  30. top: 435px;
  31. width: 100%;
  32. height: 70px;
  33. z-index: 99;
  34. }
  35. #shadow span {
  36. display: block;
  37. margin: 0 auto;
  38. height: 35px;
  39. width: 100px;
  40. border-radius: 100px / 35px;
  41. background: rgba(0,0,0,.75);
  42. }
  43. /* ----------------------------
  44. keyframes
  45. ------------------------------- */
  46. @-webkit-keyframes bounceMe {
  47. 0% { top: 50px; border-radius: 112px / 100px; height: 100px; width: 112px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
  48. 25% { border-radius: 100px / 100px; height: 100px; width: 100px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
  49. 50% { top: 400px; border-radius: 122px / 70px; height: 70px; width: 122px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.55); }
  50. 75% { border-radius: 85px / 112px; height: 112px; width: 85px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
  51. 100% { top: 50px; border-radius: 110px / 100px; height: 100px; width: 110px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
  52. }
  53. @-moz-keyframes bounceMe {
  54. 0% { top: 50px; border-radius: 112px / 100px; height: 100px; width: 112px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
  55. 25% { border-radius: 100px / 100px; height: 100px; width: 100px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
  56. 50% { top: 400px; border-radius: 122px / 70px; height: 70px; width: 122px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.55); }
  57. 75% { border-radius: 85px / 112px; height: 112px; width: 85px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
  58. 100% { top: 50px; border-radius: 110px / 100px; height: 100px; width: 110px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
  59. }
  60. @-o-keyframes bounceMe {
  61. 0% { top: 50px; border-radius: 112px / 100px; height: 100px; width: 112px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
  62. 25% { border-radius: 100px / 100px; height: 100px; width: 100px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
  63. 50% { top: 400px; border-radius: 122px / 70px; height: 70px; width: 122px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.55); }
  64. 75% { border-radius: 85px / 112px; height: 112px; width: 85px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
  65. 100% { top: 50px; border-radius: 110px / 100px; height: 100px; width: 110px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
  66. }
  67. @keyframes bounceMe {
  68. 0% { top: 50px; border-radius: 112px / 100px; height: 100px; width: 112px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
  69. 25% { border-radius: 100px / 100px; height: 100px; width: 100px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
  70. 50% { top: 400px; border-radius: 122px / 70px; height: 70px; width: 122px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.55); }
  71. 75% { border-radius: 85px / 112px; height: 112px; width: 85px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
  72. 100% { top: 50px; border-radius: 110px / 100px; height: 100px; width: 110px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
  73. }
  74. @-webkit-keyframes shadowMe {
  75. 0% { -webkit-filter: blur(10px); opacity: .25; height: 25px; width: 65px; margin-top: 10px; border-radius: 100px / 35px; }
  76. 50% { margin-top: 10px; border-radius: 100px / 35px; }
  77. 100% { -webkit-filter: blur(5px); opacity: .75; height: 30px; width: 110px; margin-top: 10px; border-radius: 112px / 30px; }
  78. }
  79. /* ----------------------------
  80. animation
  81. ------------------------------- */
  82. .bounceMe {
  83. -webkit-animation: bounceMe 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1); /* Safari 4+ */
  84. -moz-animation: bounceMe 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1); /* Fx 5+ */
  85. -o-animation: bounceMe 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1); /* Opera 12+ */
  86. animation: bounceMe 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1); /* IE 10+ */
  87. }
  88. .shadowMe {
  89. -webkit-animation: shadowMe .5s infinite alternate cubic-bezier(0.645, 0.045, 0.355, 1); /* Safari 4+ */
  90. -moz-animation: shadowMe .5s infinite alternate cubic-bezier(0.645, 0.045, 0.355, 1); /* Fx 5+ */
  91. -o-animation: shadowMe .5s infinite alternate cubic-bezier(0.645, 0.045, 0.355, 1); /* Opera 12+ */
  92. animation: shadowMe .5s infinite alternate cubic-bezier(0.645, 0.045, 0.355, 1); /* IE 10+ */
  93. }