line-scale-random.css 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. /*========================================================
  2. DARK LAYOUT
  3. =========================================================*/
  4. @-webkit-keyframes line-scale-party {
  5. 0% {
  6. transform: scale(1);
  7. }
  8. 50% {
  9. transform: scale(0.5);
  10. }
  11. 100% {
  12. transform: scale(1);
  13. }
  14. }
  15. @keyframes line-scale-party {
  16. 0% {
  17. transform: scale(1);
  18. }
  19. 50% {
  20. transform: scale(0.5);
  21. }
  22. 100% {
  23. transform: scale(1);
  24. }
  25. }
  26. .line-scale-party > div:nth-child(1) {
  27. -webkit-animation-delay: -0.14s;
  28. animation-delay: -0.14s;
  29. -webkit-animation-duration: 1.05s;
  30. animation-duration: 1.05s;
  31. }
  32. .line-scale-party > div:nth-child(2) {
  33. -webkit-animation-delay: 0.14s;
  34. animation-delay: 0.14s;
  35. -webkit-animation-duration: 1.01s;
  36. animation-duration: 1.01s;
  37. }
  38. .line-scale-party > div:nth-child(3) {
  39. -webkit-animation-delay: 0.37s;
  40. animation-delay: 0.37s;
  41. -webkit-animation-duration: 1.29s;
  42. animation-duration: 1.29s;
  43. }
  44. .line-scale-party > div:nth-child(4) {
  45. -webkit-animation-delay: 0.45s;
  46. animation-delay: 0.45s;
  47. -webkit-animation-duration: 1.04s;
  48. animation-duration: 1.04s;
  49. }
  50. .line-scale-party > div {
  51. background-color: #b8c2cc;
  52. width: 4px;
  53. height: 3.45rem;
  54. border-radius: 2px;
  55. margin: 2px;
  56. -webkit-animation-fill-mode: both;
  57. animation-fill-mode: both;
  58. display: inline-block;
  59. -webkit-animation-name: line-scale-party;
  60. animation-name: line-scale-party;
  61. -webkit-animation-iteration-count: infinite;
  62. animation-iteration-count: infinite;
  63. -webkit-animation-delay: 0;
  64. animation-delay: 0;
  65. }