line-scale.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. @-webkit-keyframes line-scale {
  2. 0% {
  3. -webkit-transform : scaley(1);
  4. transform : scaley(1);
  5. }
  6. 50% {
  7. -webkit-transform : scaley(0.4);
  8. transform : scaley(0.4);
  9. }
  10. 100% {
  11. -webkit-transform : scaley(1);
  12. transform : scaley(1);
  13. }
  14. }
  15. @-moz-keyframes line-scale {
  16. 0% {
  17. -moz-transform : scaley(1);
  18. transform : scaley(1);
  19. }
  20. 50% {
  21. -moz-transform : scaley(0.4);
  22. transform : scaley(0.4);
  23. }
  24. 100% {
  25. -moz-transform : scaley(1);
  26. transform : scaley(1);
  27. }
  28. }
  29. @-o-keyframes line-scale {
  30. 0% {
  31. -o-transform : scaley(1);
  32. transform : scaley(1);
  33. }
  34. 50% {
  35. -o-transform : scaley(0.4);
  36. transform : scaley(0.4);
  37. }
  38. 100% {
  39. -o-transform : scaley(1);
  40. transform : scaley(1);
  41. }
  42. }
  43. @keyframes line-scale {
  44. 0% {
  45. -webkit-transform : scaley(1);
  46. -moz-transform : scaley(1);
  47. -o-transform : scaley(1);
  48. transform : scaley(1);
  49. }
  50. 50% {
  51. -webkit-transform : scaley(0.4);
  52. -moz-transform : scaley(0.4);
  53. -o-transform : scaley(0.4);
  54. transform : scaley(0.4);
  55. }
  56. 100% {
  57. -webkit-transform : scaley(1);
  58. -moz-transform : scaley(1);
  59. -o-transform : scaley(1);
  60. transform : scaley(1);
  61. }
  62. }
  63. .line-scale > div:nth-child(1) {
  64. -webkit-animation : line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  65. -moz-animation : line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  66. -o-animation : line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  67. animation : line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  68. }
  69. .line-scale > div:nth-child(2) {
  70. -webkit-animation : line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  71. -moz-animation : line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  72. -o-animation : line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  73. animation : line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  74. }
  75. .line-scale > div:nth-child(3) {
  76. -webkit-animation : line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  77. -moz-animation : line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  78. -o-animation : line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  79. animation : line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  80. }
  81. .line-scale > div:nth-child(4) {
  82. -webkit-animation : line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  83. -moz-animation : line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  84. -o-animation : line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  85. animation : line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  86. }
  87. .line-scale > div:nth-child(5) {
  88. -webkit-animation : line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  89. -moz-animation : line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  90. -o-animation : line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  91. animation : line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  92. }
  93. .line-scale > div {
  94. background-color : #55595C;
  95. width : 4px;
  96. height : 3.45rem;
  97. border-radius : 2px;
  98. margin : 2px;
  99. -webkit-animation-fill-mode : both;
  100. -moz-animation-fill-mode : both;
  101. -o-animation-fill-mode : both;
  102. animation-fill-mode : both;
  103. display : inline-block;
  104. }