Posted By

discipolo on 03/04/12

Tagged

CSS3

Versions (?)

Last Edited at 03/04/12 12:37am

Statistics

Viewed 667 times

Favorited by 1 user(s)

Related snippets

Rotating circle link animation

/ Published in: CSS

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

Highlighted TextExpand

.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);
  }
}

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.