"

From 2014.igem.org

.block { width: 200px; color: #fff; margin: 35px auto; text-transform: uppercase; text-align: center; font-family: Helvetica; position: relative; perspective: 350; } .block .normal { background: gray; padding: 15px; cursor: pointer; position:relative; z-index:2; } .block .hover { background: #00aced; margin-top:-48px; padding: 15px; display: block; color: #fff; text-decoration: none; position: relative; z-index:1; transition: all 110ms ease; } .block:hover .normal { background: #0084b4; }

.block:hover .hover { margin-top: 0; -webkit-transform-origin: top; -moz-transform-origin: top; -o-transform-origin: top; -ms-transform-origin: top; transform-origin: top;

-webkit-animation: balance 1.5s ease-in-out 110ms 1 alternate; -moz-animation: balance 1.5s ease-in-out 110ms 1 alternate; -ms-animation: balance 1.5s ease-in-out 110ms 1 alternate; -o-animation: balance 1.5s ease-in-out 110ms 1 alternate; animation: balance 1.5s ease-in-out 110ms 1 alternate; }

@keyframes "balance" {

0% {
margin-top: 0;
}
15% {
margin-top: 0;
-webkit-transform: rotateX(-70deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(-70deg);
}
30% {
margin-top: 0;
-webkit-transform: rotateX(70deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(70deg);
}
45% {
margin-top: 0;
-webkit-transform: rotateX(-40deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(-40deg);
}
60% {
margin-top: 0;
-webkit-transform: rotateX(40deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(40deg);
}
75% {
margin-top: 0;
-webkit-transform: rotateX(-15deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(-15deg);
}
100% {
margin-top: 0;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}

}

@-moz-keyframes balance {

0% {
margin-top: 0;
}
15% {
margin-top: 0;
-moz-transform: rotateX(-50deg);
transform: rotateX(-50deg);
}
30% {
margin-top: 0;
-moz-transform: rotateX(50deg);
transform: rotateX(50deg);
}
45% {
margin-top: 0;
-moz-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
60% {
margin-top: 0;
-moz-transform: rotateX(30deg);
transform: rotateX(30deg);
}
75% {
margin-top: 0;
-moz-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
100% {
margin-top: 0;
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}

}

@-webkit-keyframes "balance" {

0% {
margin-top: 0;
}
15% {
margin-top: 0;
-webkit-transform: rotateX(-70deg);
transform: rotateX(-50deg);
}
30% {
margin-top: 0;
-webkit-transform: rotateX(70deg);
transform: rotateX(50deg);
}
45% {
margin-top: 0;
-webkit-transform: rotateX(-50deg);
transform: rotateX(-50deg);
}
60% {
margin-top: 0;
-webkit-transform: rotateX(50deg);
transform: rotateX(50deg);
}
75% {
margin-top: 0;
-webkit-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
100% {
margin-top: 0;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}

}

@-ms-keyframes "balance" {

0% {
margin-top: 0;
}
15% {
margin-top: 0;
-ms-transform: rotateX(-50deg);
transform: rotateX(-50deg);
}
30% {
margin-top: 0;
-ms-transform: rotateX(50deg);
transform: rotateX(50deg);
}
45% {
margin-top: 0;
-ms-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
60% {
margin-top: 0;
-ms-transform: rotateX(30deg);
transform: rotateX(30deg);
}
75% {
margin-top: 0;
-ms-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
100% {
margin-top: 0;
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}

}

@-o-keyframes "balance" {

0% {
margin-top: 0;
}
15% {
margin-top: 0;
-o-transform: rotateX(-50deg);
transform: rotateX(-50deg);
}
30% {
margin-top: 0;
-o-transform: rotateX(50deg);
transform: rotateX(50deg);
}
45% {
margin-top: 0;
-o-transform: rotateX(-35deg);
transform: rotateX(-30deg);
}
60% {
margin-top: 0;
-o-transform: rotateX(30deg);
transform: rotateX(30deg);
}
75% {
margin-top: 0;
-o-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
100% {
margin-top: 0;
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}

}