:root {
--color-loop : #f6efab;
--color-2 : #e8ecbc;
--color-3 : #d0e1c0;
--color-4 : #d0e4d9;
--color-5 : #cbe5f0;
--color-6 : #c9dfe0;
--color-7 : #d9e2d9;
--color-8 : #e8e4e2;
--color-9 : #f7dfdf;
--color-10 : #f8e3de;
--color-11 : #fae8db;
--color-12 : #ecebe1;
--color-13 : #f0eeea;
--color-14 : #f1eae0;
--color-15 : #f2e8cc;
--color-16 : #fcecba;
}
@keyframes colorchange {
0% {background: var(--color-loop);}
6% {background: var(--color-2);}
12% {background: var(--color-3);}
18% {background: var(--color-4);}
24% {background: var(--color-5);}
30% {background: var(--color-6);}
36% {background: var(--color-7);}
42% {background: var(--color-8);}
48% {background: var(--color-9);}
54% {background: var(--color-10);}
60% {background: var(--color-11);}
66% {background: var(--color-12);}
72% {background: var(--color-13);}
78% {background: var(--color-14);}
84% {background: var(--color-15);}
90% {background: var(--color-16);}
96% {background: var(--color-17);}
100% {background: var(--color-loop);}
}
.element {
animation: colorchange 30s infinite;
}
For perfect smoothness,
0% and 100% keyframes must have same color, and all the keyframes in between must have same gap to give each color the same amount of presence on the screen.
0% and 100% keyframes must have same color, and all the keyframes in between must have same gap to give each color the same amount of presence on the screen.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.