.mul4 { height: 40px; width: 40px; background-color: pink; } .mul4stripe { height: 10px; width: 40px; } .mul4stripe1 { -webkit-animation: mul4stripe1 3s infinite ease-in-out; animation: mul4stripe1 3s infinite ease-in-out; } @-webkit-keyframes mul4stripe1{ 0%, 60%, 100% { background-color: indianred; } 10%, 50% { background-color: skyblue; } } @keyframes mul4stripe1{ 0%, 60%, 100% { background-color: indianred; } 10%, 50% { background-color: skyblue; } } .mul4stripe2 { -webkit-animation: mul4stripe2 3s infinite ease-in-out; animation: mul4stripe2 3s infinite ease-in-out; } @-webkit-keyframes mul4stripe2{ 0%, 10%, 70%, 100% { background-color: indianred; } 20%, 60% { background-color: skyblue; } } @keyframes mul4stripe2{ 0%, 10%, 70%, 100% { background-color: indianred; } 20%, 60% { background-color: skyblue; } } .mul4stripe3 { -webkit-animation: mul4stripe3 3s infinite ease-in-out; animation: mul4stripe3 3s infinite ease-in-out; } @-webkit-keyframes mul4stripe3{ 0%, 20%, 80%, 100% { background-color: indianred; } 30%, 70% { background-color: skyblue; } } @keyframes mul4stripe3{ 0%, 20%, 80%, 100% { background-color: indianred; } 30%, 70% { background-color: skyblue; } } .mul4stripe4 { -webkit-animation: mul4stripe4 3s infinite ease-in-out; animation: mul4stripe4 3s infinite ease-in-out; } @-webkit-keyframes mul4stripe4{ 0%, 30%, 90%, 100% { background-color: indianred; } 40%, 80% { background-color: skyblue; } } @keyframes mul4stripe4{ 0%, 30%, 90%, 100% { background-color: indianred; } 40%, 80% { background-color: skyblue; } }