bounce anim CSS3
bounce anim CSS3
HTML
<!--<div class="andys_bouncy alert">-->
<div class="btn alert">
Click Below to start your design
<div class="arrow"></div>
</div>
CSS
body{background:#222}@-webkit-keyframes win {
0% {
margin-top: 0;
}
50% {
margin-top: 20px
}
100% {
margin-top: 0;
}
}
@keyframes win {
0% {
margin-top: 0;
}
50% {
margin-top: 20px
}
100% {
margin-top: 0;
}
}
@-webkit-keyframes plus_fx {
0% {
top: -70px;
opacity: 1
}
100% {
top: -120px;
opacity: 0;
display: none;
}
}
@keyframes plus_fx {
0% {
top: -70px;
opacity: 1
}
100% {
top: -120px;
opacity: 0;
display: none;
}
}
@-webkit-keyframes spin {
0% {
opacity: 1
}
50% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@keyframes spin {
0% {
opacity: 1
}
50% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes balance {
0% {
border-size:3px;
box-shadow: 0 0 0px #D40010;
}
50% {
border-size:10px;
box-shadow: 0 0 20px #D40010;
}
100% {
border-size:3px;
box-shadow: 0 0 0px #D40010;
}
}
@keyframes balance {
0% {
border-size:3px;
box-shadow: 0 0 0px #D40010;
}
50% {
border-size:10px;
box-shadow: 0 0 20px #D40010;
}
100% {
border-size:3px;
box-shadow: 0 0 0px #D40010;
}
}
.canvas {width:738px; height:503px; position: absolute; left:35%; bottom: 20%; margin:0 0 0 -369px;}
.shadow {width:662px; height:360px; z-index: 10; position: absolute;left: 39px;top: 41px;}
.shadow.shadow2 {background: url(../images/shadow2.png)}
.lit1 {width:110px; height:360px; background: url(../images/lit1n.jpg); position: absolute;left: 63px; top: 41px; background-position: 0 -9px}
.lit2 {width:110px; height:360px; background: url(../images/lit1n.jpg); position: absolute;left: 190px; top: 41px; background-position: 0 -128px}
.lit3 {width:110px; height:360px; background: url(../images/lit1n.jpg); position: absolute;left: 315px; top: 41px; background-position: 0 -245px}
.lit4 {width:110px; height:360px; background: url(../images/lit1n.jpg); position:...