line-scale.css 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. /*========================================================
  2. DARK LAYOUT
  3. =========================================================*/
  4. @-webkit-keyframes line-scale {
  5. 0% {
  6. transform: scaley(1);
  7. }
  8. 50% {
  9. transform: scaley(0.4);
  10. }
  11. 100% {
  12. transform: scaley(1);
  13. }
  14. }
  15. @keyframes line-scale {
  16. 0% {
  17. transform: scaley(1);
  18. }
  19. 50% {
  20. transform: scaley(0.4);
  21. }
  22. 100% {
  23. transform: scaley(1);
  24. }
  25. }
  26. .line-scale > div:nth-child(1) {
  27. -webkit-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  28. animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  29. }
  30. .line-scale > div:nth-child(2) {
  31. -webkit-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  32. animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  33. }
  34. .line-scale > div:nth-child(3) {
  35. -webkit-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  36. animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  37. }
  38. .line-scale > div:nth-child(4) {
  39. -webkit-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  40. animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  41. }
  42. .line-scale > div:nth-child(5) {
  43. -webkit-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  44. animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  45. }
  46. .line-scale > div {
  47. background-color: #b8c2cc;
  48. width: 4px;
  49. height: 3.45rem;
  50. border-radius: 2px;
  51. margin: 2px;
  52. -webkit-animation-fill-mode: both;
  53. animation-fill-mode: both;
  54. display: inline-block;
  55. }