Created
June 30, 2012 09:24
-
-
Save samarkandiy/3023083 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 */ | |
| body{ | |
| background: url(http://iweb.uz/wp-content/uploads/2012/06/soccergreen.jpg); | |
| background-size: 100%; | |
| } | |
| #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: #fff; | |
| margin-top: 5px; | |
| font-size: 25px; | |
| text-shadow: 1px 1px 1px #444; | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .match { | |
| text-align: center; | |
| color: #ff0000; | |
| font-size: 22px; | |
| text-shadow: 1px 1px 1px #fff; | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .updated-wrapper-red { | |
| width: 125px; | |
| height: 125px; | |
| overflow: hidden; | |
| position: fixed; | |
| top: -2px; | |
| right: -2px; | |
| } | |
| .updated { | |
| font-weight: bold; | |
| font-family: Sans-Serif; | |
| font-size: 23px; | |
| text-align: center; | |
| text-shadow: 0px 1px 0px #444; | |
| transform: rotate(45deg); | |
| position: relative; | |
| padding: 10px 0 ; | |
| color: #fff; | |
| left: -5px; | |
| top: 20px; | |
| width: 170px; | |
| 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+ */ | |
| -webkit-animation: glow-animation 2s linear infinite; | |
| } | |
| .updated:before, .updated:after { | |
| content: ""; | |
| /* Colour of the triangle. To flip the effect, use border-bottom. */ | |
| border-top: 3px solid #6e8900; | |
| border-left: 3px solid transparent; | |
| border-right: 3px solid transparent; | |
| position:absolute; | |
| bottom: -3px; | |
| /* +1 to compensate for the border */ | |
| } | |
| @-webkit-keyframes glow-animation { | |
| 0% { | |
| opacity: 0.5; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0.5; | |
| } | |
| } | |
| </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> | |
| <div class="updated-wrapper-red"><div class="updated">Updated</div></div> | |
| <h3 class="explanation">Click and hold the ball to push it back!</h3> | |
| <!--h3 class="match">Spain - Italy FINAL EURO - 2012</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/11">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
| <div class="updated-wrapper-red"><div class="updated">Updated</div></div> | |
| <h3 class="explanation">Click and hold the ball to push it back!</h3> | |
| <!--h3 class="match">Spain - Italy FINAL EURO - 2012</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 */ | |
| body{ | |
| background: url(http://iweb.uz/wp-content/uploads/2012/06/soccergreen.jpg); | |
| background-size: 100%; | |
| } | |
| #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: #fff; | |
| margin-top: 5px; | |
| font-size: 25px; | |
| text-shadow: 1px 1px 1px #444; | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .match { | |
| text-align: center; | |
| color: #ff0000; | |
| font-size: 22px; | |
| text-shadow: 1px 1px 1px #fff; | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .updated-wrapper-red { | |
| width: 125px; | |
| height: 125px; | |
| overflow: hidden; | |
| position: fixed; | |
| top: -2px; | |
| right: -2px; | |
| } | |
| .updated { | |
| font-weight: bold; | |
| font-family: Sans-Serif; | |
| font-size: 23px; | |
| text-align: center; | |
| text-shadow: 0px 1px 0px #444; | |
| transform: rotate(45deg); | |
| position: relative; | |
| padding: 10px 0 ; | |
| color: #fff; | |
| left: -5px; | |
| top: 20px; | |
| width: 170px; | |
| 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+ */ | |
| -webkit-animation: glow-animation 2s linear infinite; | |
| } | |
| .updated:before, .updated:after { | |
| content: ""; | |
| /* Colour of the triangle. To flip the effect, use border-bottom. */ | |
| border-top: 3px solid #6e8900; | |
| border-left: 3px solid transparent; | |
| border-right: 3px solid transparent; | |
| position:absolute; | |
| bottom: -3px; | |
| /* +1 to compensate for the border */ | |
| } | |
| @-webkit-keyframes glow-animation { | |
| 0% { | |
| opacity: 0.5; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0.5; | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment