- Jan 10, 2019
- 656
- 798
- 100
Hi i found this code to animate different colors, but when i put it on the custom css section of my wordpress site, it applys to the whole page.
body {
animation: colorchange 50s; /* animation-name followed by duration in seconds*/
/* you could also use milliseconds (ms) or something like 2.5s */
-webkit-animation: colorchange 50s; /* Chrome and Safari */
}
@keyframes colorchange
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
75% {background: green;}
100% {background: red;}
}
@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
75% {background: green;}
100% {background: red;}
}
Source: https://codepen.io/metagrapher/pen/tgcLl
How do i make it so i can call it somthing like:
anamated-bk
Then use that class or id when im making pages in elementor. I know its something to do with changing it from body, but i cant work it out.
Any help would be great.
body {
animation: colorchange 50s; /* animation-name followed by duration in seconds*/
/* you could also use milliseconds (ms) or something like 2.5s */
-webkit-animation: colorchange 50s; /* Chrome and Safari */
}
@keyframes colorchange
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
75% {background: green;}
100% {background: red;}
}
@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
75% {background: green;}
100% {background: red;}
}
Source: https://codepen.io/metagrapher/pen/tgcLl
How do i make it so i can call it somthing like:
anamated-bk
Then use that class or id when im making pages in elementor. I know its something to do with changing it from body, but i cant work it out.
Any help would be great.
