How to create a *moving* color gradient in the background.

Question

This is what I'm using thus far.

tw-story[tags~="Purple"] {
background-image: linear-gradient(to bottom right, black, purple);
}

This means that any passages that have the tag "Purple" have a black and purple gradient. I was wonder if there's a way to make this move.

https://i.stack.imgur.com/nk1FV.gif

This is what I was hoping for(But with just two colors, not the whole rainbow).

(With all the questions I ask about color, I should rename myself to color guy.

Edit: So this is what I have now:

background: linear-gradient(180deg, #000000, #ffffff);
background-size: 400% 400%;

-webkit-animation: Lite 7s ease infinite;
-moz-animation: Lite 7s ease infinite;
animation: Lite 7s ease infinite;

@-webkit-keyframes Lite {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@-moz-keyframes Lite {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@keyframes Lite { 
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}

This doesn't seem to be working however. I think I'm not combining it with what I already have correctly.

tw-story[tags~="Lite"] {
background: linear-gradient(180deg, #000000, #ffffff);
background-size: 400% 400%;

-webkit-animation: Lite 7s ease infinite;
-moz-animation: Lite 7s ease infinite;
animation: Lite 7s ease infinite;

@-webkit-keyframes Lite {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@-moz-keyframes Lite {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@keyframes Lite { 
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
}

This doesn't seem to work, what am I doing wrong?

Answer 1

note: I'm going to assume that the CSS properties within your keyframes and tw-story selector actually produce the effect that you want them too, and that you have placed your CSS within your project's Story Stylesheet area.

You have your keyframes within the body of your tw-story selector, and they should be outside of it. Try the following CSS instead.

@-webkit-keyframes Lite {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@-moz-keyframes Lite {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@keyframes Lite { 
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}

tw-story[tags~="Lite"] {
	background: linear-gradient(180deg, #000000, #ffffff);
	background-size: 400% 400%;

	-webkit-animation: Lite 7s ease infinite;
	-moz-animation: Lite 7s ease infinite;
	animation: Lite 7s ease infinite;
}

 

Comments

OMIGOD IT WORKED. THANK YOU SO MUCH HOLY CRAP!