Created
June 30, 2012 07:31
-
-
Save samarkandiy/3022798 to your computer and use it in GitHub Desktop.
A web page created at CodePen.io
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Bouncing 3D ball · CodePen</title> | |
| <style> | |
| /* 3D Bouncing ball by tympanus*/ | |
| #ballWrapper { | |
| width: 140px; | |
| height: 300px; | |
| position: fixed; | |
| left: 50%; | |
| top: 35%; | |
| margin-left: -70px; | |
| z-index: 100; | |
| -webkit-transform: scale(1); | |
| -moz-transform: scale(1); | |
| -ms-transform: scale(1); | |
| -o-transform: scale(1); | |
| transform: scale(1); | |
| -webkit-transition: all 5s linear 0s; | |
| -moz-transition: all 5s linear 0s; | |
| transition: all 5s linear 0s; | |
| cursor: pointer; | |
| } | |
| #ballWrapper:active { | |
| -webkit-transform: scale(0); | |
| -moz-transform: scale(0); | |
| -ms-transform: scale(0); | |
| -o-transform: scale(0); | |
| transform: scale(0); | |
| cursor: pointer; | |
| } | |
| #ball { | |
| width: 140px; | |
| height: 140px; | |
| border-radius: 70px; | |
| background: rgb(187,187,187); | |
| background: url(http://iweb.uz/wp-content/uploads/2012/06/ball_animated.svg); | |
| position: absolute; | |
| top: 0; | |
| z-index: 11; | |
| -webkit-animation: jump 1s infinite; | |
| -moz-animation: jump 1s infinite; | |
| -o-animation: jump 1s infinite; | |
| -ms-animation: jump 1s infinite; | |
| animation: jump 1s infinite; | |
| cursor: pointer; | |
| } | |
| #ball::after { | |
| content: ""; | |
| width: 80px; | |
| height: 40px; | |
| position: absolute; | |
| left: 30px; | |
| top: 10px; | |
| z-index: 10; | |
| background: url(http://iweb.uz/wp-content/uploads/2012/06/ball_animated.svg); | |
| background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(232,232,232,1) 1%, rgba(255,255,255,0) 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(1%,rgba(232,232,232,1)), color-stop(100%,rgba(255,255,255,0))); | |
| background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); | |
| background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); | |
| background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); | |
| background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#00ffffff',GradientType=0 ); | |
| border-radius: 40px / 20px; | |
| } | |
| #ballShadow { | |
| position: absolute; | |
| left: 50%; | |
| bottom: 0; | |
| z-index: 10; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -webkit-transform: scaleY(.3); | |
| -moz-transform: scaleY(.3); | |
| -ms-transform: scaleY(.3); | |
| -o-transform: scaleY(.3); | |
| transform: scaleY(.3); | |
| -webkit-animation: shrink 1s infinite; | |
| -moz-animation: shrink 1s infinite; | |
| -o-animation: shrink 1s infinite; | |
| -ms-animation: shrink 1s infinite; | |
| animation: shrink 1s infinite; | |
| } | |
| /* Animations */ | |
| @-webkit-keyframes jump { | |
| 0% {top: 0; | |
| -webkit-animation-timing-function: ease-in; | |
| } | |
| 40% {} | |
| 50% {top: 140px; | |
| height: 140px; | |
| -webkit-animation-timing-function: ease-out; | |
| } | |
| 55% {top: 160px; height: 120px; border-radius: 70px / 60px; | |
| -webkit-animation-timing-function: ease-in;} | |
| 65% {top: 120px; height: 140px; border-radius: 70px; | |
| -webkit-animation-timing-function: ease-out;} | |
| 95% { | |
| top: 0; | |
| -webkit-animation-timing-function: ease-in; | |
| } | |
| 100% {top: 0; | |
| -webkit-animation-timing-function: ease-in; | |
| } | |
| } | |
| @-moz-keyframes jump { | |
| 0% {top: 0; | |
| -moz-animation-timing-function: ease-in; | |
| } | |
| 40% {} | |
| 50% {top: 140px; | |
| height: 140px; | |
| -moz-animation-timing-function: ease-out; | |
| } | |
| 55% {top: 160px; height: 120px; border-radius: 70px / 60px; | |
| -moz-animation-timing-function: ease-in;} | |
| 65% {top: 120px; height: 140px; border-radius: 70px; | |
| -moz-animation-timing-function: ease-out;} | |
| 95% { | |
| top: 0; | |
| -moz-animation-timing-function: ease-in; | |
| } | |
| 100% {top: 0; | |
| -moz-animation-timing-function: ease-in; | |
| } | |
| } | |
| @-o-keyframes jump { | |
| 0% {top: 0; | |
| -o-animation-timing-function: ease-in; | |
| } | |
| 40% {} | |
| 50% {top: 140px; | |
| height: 140px; | |
| -o-animation-timing-function: ease-out; | |
| } | |
| 55% {top: 160px; height: 120px; border-radius: 70px / 60px; | |
| -o-animation-timing-function: ease-in;} | |
| 65% {top: 120px; height: 140px; border-radius: 70px; | |
| -o-animation-timing-function: ease-out;} | |
| 95% { | |
| top: 0; | |
| -o-animation-timing-function: ease-in; | |
| } | |
| 100% {top: 0; | |
| -o-animation-timing-function: ease-in; | |
| } | |
| } | |
| @-ms-keyframes jump { | |
| 0% {top: 0; | |
| -ms-animation-timing-function: ease-in; | |
| } | |
| 40% {} | |
| 50% {top: 140px; | |
| height: 140px; | |
| -ms-animation-timing-function: ease-out; | |
| } | |
| 55% {top: 160px; height: 120px; border-radius: 70px / 60px; | |
| -ms-animation-timing-function: ease-in;} | |
| 65% {top: 120px; height: 140px; border-radius: 70px; | |
| -ms-animation-timing-function: ease-out;} | |
| 95% { | |
| top: 0; | |
| -ms-animation-timing-function: ease-in; | |
| } | |
| 100% {top: 0; | |
| -ms-animation-timing-function: ease-in; | |
| } | |
| } | |
| @keyframes jump { | |
| 0% { | |
| top: 0; | |
| animation-timing-function: ease-in; | |
| } | |
| 50% { | |
| top: 140px; | |
| height: 140px; | |
| animation-timing-function: ease-out; | |
| } | |
| 55% { | |
| top: 160px; | |
| height: 120px; | |
| border-radius: 70px / 60px; | |
| animation-timing-function: ease-in; | |
| } | |
| 65% { | |
| top: 120px; | |
| height: 140px; | |
| border-radius: 70px; | |
| animation-timing-function: ease-out; | |
| } | |
| 95% { | |
| top: 0; | |
| animation-timing-function: ease-in; | |
| } | |
| 100% { | |
| top: 0; | |
| animation-timing-function: ease-in; | |
| } | |
| } | |
| @-webkit-keyframes shrink { | |
| 0% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -webkit-animation-timing-function: ease-in; | |
| } | |
| 50% { | |
| bottom: 30px; | |
| margin-left: -10px; | |
| width: 20px; | |
| height: 5px; | |
| background: rgba(20, 20, 20, .3); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.3); | |
| border-radius: 20px / 20px; | |
| -webkit-animation-timing-function: ease-out; | |
| } | |
| 100% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -webkit-animation-timing-function: ease-in; | |
| } | |
| } | |
| @-moz-keyframes shrink { | |
| 0% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -moz-animation-timing-function: ease-in; | |
| } | |
| 50% { | |
| bottom: 30px; | |
| margin-left: -10px; | |
| width: 20px; | |
| height: 5px; | |
| background: rgba(20, 20, 20, .3); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.3); | |
| border-radius: 20px / 20px; | |
| -moz-animation-timing-function: ease-out; | |
| } | |
| 100% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -moz-animation-timing-function: ease-in; | |
| } | |
| } | |
| @-o-keyframes shrink { | |
| 0% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -o-animation-timing-function: ease-in; | |
| } | |
| 50% { | |
| bottom: 30px; | |
| margin-left: -10px; | |
| width: 20px; | |
| height: 5px; | |
| background: rgba(20, 20, 20, .3); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.3); | |
| border-radius: 20px / 20px; | |
| -o-animation-timing-function: ease-out; | |
| } | |
| 100% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -o-animation-timing-function: ease-in; | |
| } | |
| } | |
| @-ms-keyframes shrink { | |
| 0% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -ms-animation-timing-function: ease-in; | |
| } | |
| 50% { | |
| bottom: 30px; | |
| margin-left: -10px; | |
| width: 20px; | |
| height: 5px; | |
| background: rgba(20, 20, 20, .3); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.3); | |
| border-radius: 20px / 20px; | |
| -ms-animation-timing-function: ease-out; | |
| } | |
| 100% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -ms-animation-timing-function: ease-in; | |
| } | |
| } | |
| @keyframes shrink { | |
| 0% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| animation-timing-function: ease-in; | |
| } | |
| 50% { | |
| bottom: 30px; | |
| margin-left: -10px; | |
| width: 20px; | |
| height: 5px; | |
| background: rgba(20, 20, 20, .3); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.3); | |
| border-radius: 20px / 20px; | |
| animation-timing-function: ease-out; | |
| } | |
| 100% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| animation-timing-function: ease-in; | |
| } | |
| } | |
| .explanation { | |
| text-align: center; | |
| color: #888; | |
| text-shadow: 1px 1px 1px rgba(255,255,255,0.7); | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| </style> | |
| <style> | |
| #codepen-footer, #codepen-footer * { | |
| -webkit-box-sizing: border-box !important; | |
| -moz-box-sizing: border-box !important; | |
| box-sizing: border-box !important; | |
| } | |
| #codepen-footer { | |
| display: block !important; | |
| position: fixed !important; | |
| bottom: 0 !important; | |
| left: 0 !important; | |
| width: 100% !important; | |
| padding: 0 10px !important; | |
| margin: 0 !important; | |
| height: 30px !important; | |
| line-height: 30px !important; | |
| font-size: 12px !important; | |
| color: #eeeeee !important; | |
| background-color: #505050 !important; | |
| text-align: left !important; | |
| background: -webkit-linear-gradient(top, #505050, #383838) !important; | |
| background: -moz-linear-gradient(top, #505050, #383838) !important; | |
| background: -ms-linear-gradient(top, #505050, #383838) !important; | |
| background: -o-linear-gradient(top, #505050, #383838) !important; | |
| border-top: 1px solid black !important; | |
| border-bottom: 1px solid black !important; | |
| border-radius: 0 !important; | |
| border-image: none !important; | |
| box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important; | |
| z-index: 300 !important; | |
| font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important; | |
| letter-spacing: 0 !important; | |
| word-spacing: 0 !important; | |
| } | |
| #codepen-footer a { | |
| color: #a7a7a7 !important; | |
| text-decoration: none !important; | |
| } | |
| #codepen-footer a:hover { | |
| color: white !important; | |
| } | |
| </style> | |
| <script> | |
| // Kill alerts, confirmations and prompts | |
| window.alert = function(){}; | |
| window.confirm = function(){}; | |
| window.prompt = function(){}; | |
| window.open = function(){}; | |
| window.print = function(){}; | |
| </script> | |
| <script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script> | |
| </head> | |
| <body> | |
| <h3 class="explanation">Click and hold the ball to make it move back!</h3> | |
| <div id="ballWrapper"> | |
| <div id="ball"></div> | |
| <div id="ballShadow"></div> | |
| <script src="http://codepen.io/javascripts/libs/modernizr.js"></script> | |
| <div id="codepen-footer"> | |
| <a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a> | |
| | |
| <a href="/html5web/pen/animatedsvgcss3/1">Edit this Pen</a> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h3 class="explanation">Click and hold the ball to make it move back!</h3> | |
| <div id="ballWrapper"> | |
| <div id="ball"></div> | |
| <div id="ballShadow"></div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 3D Bouncing ball by tympanus*/ | |
| #ballWrapper { | |
| width: 140px; | |
| height: 300px; | |
| position: fixed; | |
| left: 50%; | |
| top: 35%; | |
| margin-left: -70px; | |
| z-index: 100; | |
| -webkit-transform: scale(1); | |
| -moz-transform: scale(1); | |
| -ms-transform: scale(1); | |
| -o-transform: scale(1); | |
| transform: scale(1); | |
| -webkit-transition: all 5s linear 0s; | |
| -moz-transition: all 5s linear 0s; | |
| transition: all 5s linear 0s; | |
| cursor: pointer; | |
| } | |
| #ballWrapper:active { | |
| -webkit-transform: scale(0); | |
| -moz-transform: scale(0); | |
| -ms-transform: scale(0); | |
| -o-transform: scale(0); | |
| transform: scale(0); | |
| cursor: pointer; | |
| } | |
| #ball { | |
| width: 140px; | |
| height: 140px; | |
| border-radius: 70px; | |
| background: rgb(187,187,187); | |
| background: url(http://iweb.uz/wp-content/uploads/2012/06/ball_animated.svg); | |
| position: absolute; | |
| top: 0; | |
| z-index: 11; | |
| -webkit-animation: jump 1s infinite; | |
| -moz-animation: jump 1s infinite; | |
| -o-animation: jump 1s infinite; | |
| -ms-animation: jump 1s infinite; | |
| animation: jump 1s infinite; | |
| cursor: pointer; | |
| } | |
| #ball::after { | |
| content: ""; | |
| width: 80px; | |
| height: 40px; | |
| position: absolute; | |
| left: 30px; | |
| top: 10px; | |
| z-index: 10; | |
| background: url(http://iweb.uz/wp-content/uploads/2012/06/ball_animated.svg); | |
| background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(232,232,232,1) 1%, rgba(255,255,255,0) 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(1%,rgba(232,232,232,1)), color-stop(100%,rgba(255,255,255,0))); | |
| background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); | |
| background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); | |
| background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); | |
| background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#00ffffff',GradientType=0 ); | |
| border-radius: 40px / 20px; | |
| } | |
| #ballShadow { | |
| position: absolute; | |
| left: 50%; | |
| bottom: 0; | |
| z-index: 10; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -webkit-transform: scaleY(.3); | |
| -moz-transform: scaleY(.3); | |
| -ms-transform: scaleY(.3); | |
| -o-transform: scaleY(.3); | |
| transform: scaleY(.3); | |
| -webkit-animation: shrink 1s infinite; | |
| -moz-animation: shrink 1s infinite; | |
| -o-animation: shrink 1s infinite; | |
| -ms-animation: shrink 1s infinite; | |
| animation: shrink 1s infinite; | |
| } | |
| /* Animations */ | |
| @-webkit-keyframes jump { | |
| 0% {top: 0; | |
| -webkit-animation-timing-function: ease-in; | |
| } | |
| 40% {} | |
| 50% {top: 140px; | |
| height: 140px; | |
| -webkit-animation-timing-function: ease-out; | |
| } | |
| 55% {top: 160px; height: 120px; border-radius: 70px / 60px; | |
| -webkit-animation-timing-function: ease-in;} | |
| 65% {top: 120px; height: 140px; border-radius: 70px; | |
| -webkit-animation-timing-function: ease-out;} | |
| 95% { | |
| top: 0; | |
| -webkit-animation-timing-function: ease-in; | |
| } | |
| 100% {top: 0; | |
| -webkit-animation-timing-function: ease-in; | |
| } | |
| } | |
| @-moz-keyframes jump { | |
| 0% {top: 0; | |
| -moz-animation-timing-function: ease-in; | |
| } | |
| 40% {} | |
| 50% {top: 140px; | |
| height: 140px; | |
| -moz-animation-timing-function: ease-out; | |
| } | |
| 55% {top: 160px; height: 120px; border-radius: 70px / 60px; | |
| -moz-animation-timing-function: ease-in;} | |
| 65% {top: 120px; height: 140px; border-radius: 70px; | |
| -moz-animation-timing-function: ease-out;} | |
| 95% { | |
| top: 0; | |
| -moz-animation-timing-function: ease-in; | |
| } | |
| 100% {top: 0; | |
| -moz-animation-timing-function: ease-in; | |
| } | |
| } | |
| @-o-keyframes jump { | |
| 0% {top: 0; | |
| -o-animation-timing-function: ease-in; | |
| } | |
| 40% {} | |
| 50% {top: 140px; | |
| height: 140px; | |
| -o-animation-timing-function: ease-out; | |
| } | |
| 55% {top: 160px; height: 120px; border-radius: 70px / 60px; | |
| -o-animation-timing-function: ease-in;} | |
| 65% {top: 120px; height: 140px; border-radius: 70px; | |
| -o-animation-timing-function: ease-out;} | |
| 95% { | |
| top: 0; | |
| -o-animation-timing-function: ease-in; | |
| } | |
| 100% {top: 0; | |
| -o-animation-timing-function: ease-in; | |
| } | |
| } | |
| @-ms-keyframes jump { | |
| 0% {top: 0; | |
| -ms-animation-timing-function: ease-in; | |
| } | |
| 40% {} | |
| 50% {top: 140px; | |
| height: 140px; | |
| -ms-animation-timing-function: ease-out; | |
| } | |
| 55% {top: 160px; height: 120px; border-radius: 70px / 60px; | |
| -ms-animation-timing-function: ease-in;} | |
| 65% {top: 120px; height: 140px; border-radius: 70px; | |
| -ms-animation-timing-function: ease-out;} | |
| 95% { | |
| top: 0; | |
| -ms-animation-timing-function: ease-in; | |
| } | |
| 100% {top: 0; | |
| -ms-animation-timing-function: ease-in; | |
| } | |
| } | |
| @keyframes jump { | |
| 0% { | |
| top: 0; | |
| animation-timing-function: ease-in; | |
| } | |
| 50% { | |
| top: 140px; | |
| height: 140px; | |
| animation-timing-function: ease-out; | |
| } | |
| 55% { | |
| top: 160px; | |
| height: 120px; | |
| border-radius: 70px / 60px; | |
| animation-timing-function: ease-in; | |
| } | |
| 65% { | |
| top: 120px; | |
| height: 140px; | |
| border-radius: 70px; | |
| animation-timing-function: ease-out; | |
| } | |
| 95% { | |
| top: 0; | |
| animation-timing-function: ease-in; | |
| } | |
| 100% { | |
| top: 0; | |
| animation-timing-function: ease-in; | |
| } | |
| } | |
| @-webkit-keyframes shrink { | |
| 0% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -webkit-animation-timing-function: ease-in; | |
| } | |
| 50% { | |
| bottom: 30px; | |
| margin-left: -10px; | |
| width: 20px; | |
| height: 5px; | |
| background: rgba(20, 20, 20, .3); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.3); | |
| border-radius: 20px / 20px; | |
| -webkit-animation-timing-function: ease-out; | |
| } | |
| 100% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -webkit-animation-timing-function: ease-in; | |
| } | |
| } | |
| @-moz-keyframes shrink { | |
| 0% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -moz-animation-timing-function: ease-in; | |
| } | |
| 50% { | |
| bottom: 30px; | |
| margin-left: -10px; | |
| width: 20px; | |
| height: 5px; | |
| background: rgba(20, 20, 20, .3); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.3); | |
| border-radius: 20px / 20px; | |
| -moz-animation-timing-function: ease-out; | |
| } | |
| 100% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -moz-animation-timing-function: ease-in; | |
| } | |
| } | |
| @-o-keyframes shrink { | |
| 0% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -o-animation-timing-function: ease-in; | |
| } | |
| 50% { | |
| bottom: 30px; | |
| margin-left: -10px; | |
| width: 20px; | |
| height: 5px; | |
| background: rgba(20, 20, 20, .3); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.3); | |
| border-radius: 20px / 20px; | |
| -o-animation-timing-function: ease-out; | |
| } | |
| 100% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -o-animation-timing-function: ease-in; | |
| } | |
| } | |
| @-ms-keyframes shrink { | |
| 0% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -ms-animation-timing-function: ease-in; | |
| } | |
| 50% { | |
| bottom: 30px; | |
| margin-left: -10px; | |
| width: 20px; | |
| height: 5px; | |
| background: rgba(20, 20, 20, .3); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.3); | |
| border-radius: 20px / 20px; | |
| -ms-animation-timing-function: ease-out; | |
| } | |
| 100% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| -ms-animation-timing-function: ease-in; | |
| } | |
| } | |
| @keyframes shrink { | |
| 0% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| animation-timing-function: ease-in; | |
| } | |
| 50% { | |
| bottom: 30px; | |
| margin-left: -10px; | |
| width: 20px; | |
| height: 5px; | |
| background: rgba(20, 20, 20, .3); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.3); | |
| border-radius: 20px / 20px; | |
| animation-timing-function: ease-out; | |
| } | |
| 100% { | |
| bottom: 0; | |
| margin-left: -30px; | |
| width: 60px; | |
| height: 75px; | |
| background: rgba(20, 20, 20, .1); | |
| box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); | |
| border-radius: 30px / 40px; | |
| animation-timing-function: ease-in; | |
| } | |
| } | |
| .explanation { | |
| text-align: center; | |
| color: #888; | |
| text-shadow: 1px 1px 1px rgba(255,255,255,0.7); | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment