Squash & Squeeze Animation
Using Slash Syntax CSS
by Ian Field-Richards © 2014 - FREE TO USE
- <!-- html -->
- <div class="wrapper">
- <div id="ball" class="bounceMe"></div>
- <div id="shadow"><span class="shadowMe"></span></div>
- </div>
- /* css */
- .wrapper {
- width: 100%;
- height: 550px;
- text-align: center;
- position: relative;
- margin: 0 auto;
- text-align: center;
- }
- #ball {
- background: #a90329; /* Old browsers */
- background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
- background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
- display: block;
- height: 50px;
- width: 100px;
- border-radius: 100px / 50px;
- position: relative;
- top: 50px;
- margin: 0 auto;
- z-index: 100;
- }
- #shadow {
- position: absolute;
- top: 435px;
- width: 100%;
- height: 70px;
- z-index: 99;
- }
- #shadow span {
- display: block;
- margin: 0 auto;
- height: 35px;
- width: 100px;
- border-radius: 100px / 35px;
- background: rgba(0,0,0,.75);
- }
- /* ----------------------------
- keyframes
- ------------------------------- */
- @-webkit-keyframes bounceMe {
- 0% { top: 50px; border-radius: 112px / 100px; height: 100px; width: 112px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
- 25% { border-radius: 100px / 100px; height: 100px; width: 100px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
- 50% { top: 400px; border-radius: 122px / 70px; height: 70px; width: 122px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.55); }
- 75% { border-radius: 85px / 112px; height: 112px; width: 85px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
- 100% { top: 50px; border-radius: 110px / 100px; height: 100px; width: 110px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
- }
- @-moz-keyframes bounceMe {
- 0% { top: 50px; border-radius: 112px / 100px; height: 100px; width: 112px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
- 25% { border-radius: 100px / 100px; height: 100px; width: 100px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
- 50% { top: 400px; border-radius: 122px / 70px; height: 70px; width: 122px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.55); }
- 75% { border-radius: 85px / 112px; height: 112px; width: 85px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
- 100% { top: 50px; border-radius: 110px / 100px; height: 100px; width: 110px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
- }
- @-o-keyframes bounceMe {
- 0% { top: 50px; border-radius: 112px / 100px; height: 100px; width: 112px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
- 25% { border-radius: 100px / 100px; height: 100px; width: 100px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
- 50% { top: 400px; border-radius: 122px / 70px; height: 70px; width: 122px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.55); }
- 75% { border-radius: 85px / 112px; height: 112px; width: 85px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
- 100% { top: 50px; border-radius: 110px / 100px; height: 100px; width: 110px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
- }
- @keyframes bounceMe {
- 0% { top: 50px; border-radius: 112px / 100px; height: 100px; width: 112px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
- 25% { border-radius: 100px / 100px; height: 100px; width: 100px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
- 50% { top: 400px; border-radius: 122px / 70px; height: 70px; width: 122px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.55); }
- 75% { border-radius: 85px / 112px; height: 112px; width: 85px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35); }
- 100% { top: 50px; border-radius: 110px / 100px; height: 100px; width: 110px; box-shadow: inset -25px -25px 40px rgba(0,0,0,.35);}
- }
- @-webkit-keyframes shadowMe {
- 0% { -webkit-filter: blur(10px); opacity: .25; height: 25px; width: 65px; margin-top: 10px; border-radius: 100px / 35px; }
- 50% { margin-top: 10px; border-radius: 100px / 35px; }
- 100% { -webkit-filter: blur(5px); opacity: .75; height: 30px; width: 110px; margin-top: 10px; border-radius: 112px / 30px; }
- }
- /* ----------------------------
- animation
- ------------------------------- */
- .bounceMe {
- -webkit-animation: bounceMe 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1); /* Safari 4+ */
- -moz-animation: bounceMe 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1); /* Fx 5+ */
- -o-animation: bounceMe 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1); /* Opera 12+ */
- animation: bounceMe 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1); /* IE 10+ */
- }
- .shadowMe {
- -webkit-animation: shadowMe .5s infinite alternate cubic-bezier(0.645, 0.045, 0.355, 1); /* Safari 4+ */
- -moz-animation: shadowMe .5s infinite alternate cubic-bezier(0.645, 0.045, 0.355, 1); /* Fx 5+ */
- -o-animation: shadowMe .5s infinite alternate cubic-bezier(0.645, 0.045, 0.355, 1); /* Opera 12+ */
- animation: shadowMe .5s infinite alternate cubic-bezier(0.645, 0.045, 0.355, 1); /* IE 10+ */
- }