Rotating circle link animation


/ Published in: CSS
Save to your folder(s)

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


Copy this code and paste it in your HTML
  1. .sp-circle-link {
  2. text-align: center;
  3. line-height: 100px;
  4. width: 100px;
  5. height: 100px;
  6. background: #fff;
  7. color: #3f1616;
  8. font-size: 25px;
  9.  
  10. -moz-border-radius: 50%;
  11. -webkit-border-radius: 50%;
  12. -o-border-radius: 50%;
  13. border-radius: 50%;
  14.  
  15. -webkit-animation: fadeInRotate 1s linear 16s backwards;
  16. -moz-animation: fadeInRotate 1s linear 16s backwards;
  17. -ms-animation: fadeInRotate 1s linear 16s backwards;
  18. animation: fadeInRotate 1s linear 16s backwards;
  19.  
  20. -webkit-transform: scale(1);
  21. -moz-transform: scale(1) ;
  22. -o-transform: scale(1);
  23. -ms-transform: scale(1);
  24. transform: scale(1);
  25. }
  26. .sp-circle-link:hover {
  27. background: #85373b;
  28. color: #fff;
  29. }
  30.  
  31. @-webkit-keyframes fadeInRotate{
  32. 0%{
  33. opacity: 0;
  34. -webkit-transform: scale(0) rotate(360deg);
  35. }
  36. 100%{
  37. opacity: 1;
  38. -webkit-transform: scale(1) rotate(0deg);
  39. }
  40. }
  41.  
  42. @-moz-keyframes fadeInRotate{
  43. 0%{
  44. opacity: 0;
  45. -moz-transform: scale(0) rotate(360deg);
  46. }
  47. 100%{
  48. opacity: 1;
  49. -moz-transform: scale(1) rotate(0deg);
  50. }
  51. }
  52. @keyframes fadeInRotate{
  53. 0%{
  54. opacity: 0;
  55. transform: scale(0) rotate(360deg);
  56. }
  57. 100%{
  58. opacity: 1;
  59. transform: scale(1) rotate(0deg);
  60. }
  61. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.