.mul10 { height: 50px; width: 50px; position: relative; } .m10c { height: 12px; width: 12px; border-radius: 50%; background-color: #E26A6A; position: absolute; } .m10c1, .m10c2, .m10c3 { top: 0; } .m10c4, .m10c5, .m10c6 { top: 19px; } .m10c7, .m10c8, .m10c9 { top: 38px; } .m10c1, .m10c4, .m10c7 { left: 0; } .m10c2, .m10c5, .m10c8 { left: 19px; } .m10c3, .m10c6, .m10c9 { left: 38px; } .m10c1 { -webkit-animation: m10Anim 3s infinite ease-in-out; animation: m10Anim 3s infinite ease-in-out; } .m10c2 { -webkit-animation: m10Anim 4s infinite ease-in-out; animation: m10Anim 4s infinite ease-in-out; } .m10c3 { -webkit-animation: m10Anim 7s infinite ease-in-out; animation: m10Anim 7s infinite ease-in-out; } .m10c4 { -webkit-animation: m10Anim 2.5s infinite ease-in-out; animation: m10Anim 2.5s infinite ease-in-out; } .m10c5 { -webkit-animation: m10Anim 5s infinite ease-in-out; animation: m10Anim 5s infinite ease-in-out; } .m10c6 { -webkit-animation: m10Anim 6.2s infinite ease-in-out; animation: m10Anim 6.2s infinite ease-in-out; } .m10c7 { -webkit-animation: m10Anim 8.4s infinite ease-in-out; animation: m10Anim 8.4s infinite ease-in-out; } .m10c8 { -webkit-animation: m10Anim 5.5s infinite ease-in-out; animation: m10Anim 5.5s infinite ease-in-out; } .m10c9 { -webkit-animation: m10Anim 6s infinite ease-in-out; animation: m10Anim 6s infinite ease-in-out; } @-webkit-keyframes m10Anim { 0%, 80%, 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 40%, 60% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes m10Anim { 0%, 80%, 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 40%, 60% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } }