ball-scale.css 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. @-webkit-keyframes ball-scale {
  2. 0% {
  3. -webkit-transform : scale(0);
  4. transform : scale(0);
  5. }
  6. 100% {
  7. -webkit-transform : scale(1);
  8. transform : scale(1);
  9. opacity : 0;
  10. }
  11. }
  12. @-moz-keyframes ball-scale {
  13. 0% {
  14. -moz-transform : scale(0);
  15. transform : scale(0);
  16. }
  17. 100% {
  18. -moz-transform : scale(1);
  19. transform : scale(1);
  20. opacity : 0;
  21. }
  22. }
  23. @-o-keyframes ball-scale {
  24. 0% {
  25. -o-transform : scale(0);
  26. transform : scale(0);
  27. }
  28. 100% {
  29. -o-transform : scale(1);
  30. transform : scale(1);
  31. opacity : 0;
  32. }
  33. }
  34. @keyframes ball-scale {
  35. 0% {
  36. -webkit-transform : scale(0);
  37. -moz-transform : scale(0);
  38. -o-transform : scale(0);
  39. transform : scale(0);
  40. }
  41. 100% {
  42. -webkit-transform : scale(1);
  43. -moz-transform : scale(1);
  44. -o-transform : scale(1);
  45. transform : scale(1);
  46. opacity : 0;
  47. }
  48. }
  49. .ball-scale > div {
  50. background-color : #55595C;
  51. width : 15px;
  52. height : 15px;
  53. border-radius : 100%;
  54. margin : 2px;
  55. -webkit-animation-fill-mode : both;
  56. -moz-animation-fill-mode : both;
  57. -o-animation-fill-mode : both;
  58. animation-fill-mode : both;
  59. display : inline-block;
  60. height : 60px;
  61. width : 60px;
  62. -webkit-animation : ball-scale 1s 0s ease-in-out infinite;
  63. -moz-animation : ball-scale 1s 0s ease-in-out infinite;
  64. -o-animation : ball-scale 1s 0s ease-in-out infinite;
  65. animation : ball-scale 1s 0s ease-in-out infinite;
  66. }