Skip to content

Instantly share code, notes, and snippets.

@mutukrish

mutukrish/index.html

Created October 7, 2012 09:41
Show Gist options
  • Save mutukrish/3847678 to your computer and use it in GitHub Desktop.
Save mutukrish/3847678 to your computer and use it in GitHub Desktop.
Download ZIP
bouncing text using keyframes
Raw
index.html
<body>
<div class="container">
<section class="main">
<div id="textWrapper">
<div id="text">me</div>
<div id="textShadow"></div>
</div>
</section>
</div>
</body>
Raw
style.css
/* 3D Bouncing ball */
body{
background-color:#ccc;
}
#textWrapper {
width: 240px;
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;
}
#textWrapper:active {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
cursor: pointer;
}
#text {
width: 240px;
height: 140px;
position: absolute;
top: 0;
font-family: 'Yanone Kaffeesatz', cursive;
line-height: 1em;
color: #fff9d6;
font-weight:bold;
font-size: 85px;
text-shadow:0px 0px 0 rgb(231,231,231),1px 0px 0 rgb(216,216,216),2px 0px 0 rgb(202,202,202),3px 0px 0 rgb(187,187,187),4px 0px 0 rgb(173,173,173),5px 0px 0 rgb(158,158,158), 6px 0px 0 rgb(144,144,144),7px 0px 6px rgba(0,0,0,0.6),7px 0px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2);
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;
}
#text:after {
border-bottom: 10px solid #EFE60F;
border-radius: 61px 61px 61px 61px;
content: "";
left: 3px;
position: absolute;
top: 85px;
width: 116px;
z-index: 10;
box-shadow:0px 1px 1px #ccc;
}
#textShadow {
position: absolute;
left: 24%;
bottom: 0;
z-index: 10;
margin-left: -30px;
width: 100px;
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment