Team:CityU HK/lablog/project1.css

From 2014.igem.org

(Difference between revisions)
(Undo revision 18585 by Kenlaukit (talk))
Line 29: Line 29:
-ms-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;
-o-animation: balance 1.5s ease-in-out 110ms 1 alternate;
-
animation: balance 1.5s ease-in-out 110ms 1 alternate;
+
animation: balance 1.5s ease-in-out 150ms 1 alternate;
}
}

Revision as of 13:27, 20 June 2014

.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 250ms 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 150ms 1 alternate; }


@keyframes "balance" { 

0% {
margin-top: 0;
}
15% {
margin-top: 0;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(-50deg);
}
30% {
margin-top: 0;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(50deg);
}
45% {
margin-top: 0;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(-30deg);
}
60% {
margin-top: 0;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(30deg);
}
75% {
margin-top: 0;
-webkit-transform: rotateX(0deg);
-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(-50deg);
transform: rotateX(-50deg);
}
30% {
margin-top: 0;
-webkit-transform: rotateX(50deg);
transform: rotateX(50deg);
}
45% {
margin-top: 0;
-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
60% {
margin-top: 0;
-webkit-transform: rotateX(30deg);
transform: rotateX(30deg);
}
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);
}

}

Retrieved from "http://2014.igem.org/Team:CityU_HK/lablog/project1.css"