ball-scale-ripple.css 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. @-webkit-keyframes ball-scale-ripple {
  2. 0% {
  3. -webkit-transform : scale(0.1);
  4. transform : scale(0.1);
  5. opacity : 1;
  6. }
  7. 70% {
  8. -webkit-transform : scale(1);
  9. transform : scale(1);
  10. opacity : 0.7;
  11. }
  12. 100% {
  13. opacity : 0.0;
  14. }
  15. }
  16. @-moz-keyframes ball-scale-ripple {
  17. 0% {
  18. -moz-transform : scale(0.1);
  19. transform : scale(0.1);
  20. opacity : 1;
  21. }
  22. 70% {
  23. -moz-transform : scale(1);
  24. transform : scale(1);
  25. opacity : 0.7;
  26. }
  27. 100% {
  28. opacity : 0.0;
  29. }
  30. }
  31. @-o-keyframes ball-scale-ripple {
  32. 0% {
  33. -o-transform : scale(0.1);
  34. transform : scale(0.1);
  35. opacity : 1;
  36. }
  37. 70% {
  38. -o-transform : scale(1);
  39. transform : scale(1);
  40. opacity : 0.7;
  41. }
  42. 100% {
  43. opacity : 0.0;
  44. }
  45. }
  46. @keyframes ball-scale-ripple {
  47. 0% {
  48. -webkit-transform : scale(0.1);
  49. -moz-transform : scale(0.1);
  50. -o-transform : scale(0.1);
  51. transform : scale(0.1);
  52. opacity : 1;
  53. }
  54. 70% {
  55. -webkit-transform : scale(1);
  56. -moz-transform : scale(1);
  57. -o-transform : scale(1);
  58. transform : scale(1);
  59. opacity : 0.7;
  60. }
  61. 100% {
  62. opacity : 0.0;
  63. }
  64. }
  65. .ball-scale-ripple > div {
  66. -webkit-animation-fill-mode : both;
  67. -moz-animation-fill-mode : both;
  68. -o-animation-fill-mode : both;
  69. animation-fill-mode : both;
  70. height : 50px;
  71. width : 50px;
  72. border-radius : 100%;
  73. border : 2px solid #55595C;
  74. -webkit-animation : ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  75. -moz-animation : ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  76. -o-animation : ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  77. animation : ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  78. }