this is a link
a.thebg{
color:#000;
background:#f00;
padding:5px;
-webkit-border-radius: 5px;
-webkit-transition-property:color, background;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
}
a.thebg:hover{color:#f00;
background:#000;}
#signpost{
width:60px;
height:196px;
position:relative;
}
#signpost #post{
width:79px;
height:196px;
z-index:2;
position:relative;
}
#signpost #sign{
height:46px;
width:80px;
position:absolute;
top:10;
left:60;
-webkit-transform-origin:0 0;
-webkit-transform: rotate(86deg);
z-index:1;
-webkit-transition:-webkit-transform 0.5s ease-in-out;
}
#signpost:hover #sign{
-webkit-transform:rotate(0deg);
}
#circles{
width:180px;
height:180px;
position:relative;
}
.outercircle{
width:180px;
height:180px;
position:absolute;
z-index:1;
top:0:
left:0;
}
#circles:hover .outercircle {
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 10s;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.middlecircle{
width:90px;
height:90px;
position:absolute;
z-index:3;
top:45px;
left:45px;
}
#circles:hover .middlecircle{
-webkit-animation-name: spinrev;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 5s;
}
@-webkit-keyframes spinrev {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
}
}