Rotating circle link animation - CSS Snipplr Social Repository

Revision: 55992

at March 4, 2012 00:37 by discipolo

Initial Code

.sp-circle-link {
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #fff;
color: #3f1616;
font-size: 25px;

-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;

-webkit-animation: fadeInRotate 1s linear 16s backwards;
-moz-animation: fadeInRotate 1s linear 16s backwards;
-ms-animation: fadeInRotate 1s linear 16s backwards;
animation: fadeInRotate 1s linear 16s backwards;

-webkit-transform: scale(1);
-moz-transform: scale(1) ;
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.sp-circle-link:hover {
background: #85373b;
color: #fff;
}

@-webkit-keyframes fadeInRotate{
0%{
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
  }
100%{
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
  }
}

@-moz-keyframes fadeInRotate{
0%{
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
  }
100%{
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
  }
}
@keyframes fadeInRotate{
  0%{
opacity: 0;
transform: scale(0) rotate(360deg);
  }
  100%{
opacity: 1;
transform: scale(1) rotate(0deg);
  }
}

Initial URL

Initial Description

a link with the class becomes circle animated  rotating once and fading in

Initial Title

Rotating circle link animation

Initial Tags

CSS3

Initial Language

CSS

Choose a language for easy browsing: