Animated text style changes to unexpected color

Two questions.

1st question:
When I am using my animated style on a text label, the defined grey color (#A5A5A5) changes in a some kind of purple.
De color definition at the 0% is the same, only text en back-ground colors are swapped.
When I change the yellow color into red, the grey color does not change into purple.
Am I doing something wrong?

2nd question:
Is it possible to make a flashing text style without 'smoothing' like a digital animation?

Thats weird, does this purple color also happen in the browser?
Are you sure 0% is correct?

got an gif of this?

It's fairly easy when using the stylesheet, use steps():

animation-timing-function: steps(2);

or maybe

animation-timing-function: steps(2,end)

Thank you. This works great!
It also solves my first problem. Now I am using lineair for timing the unexpected color change is also gone.
It looks like the problem has something to do with de cube-bezier timing.

The timing should not effect colors.
unless you can replicate it by just changing that, if thats the case i would like to see an export of this :slight_smile:

1 Like

AnimatedColorStyle.zip (6.4 KB)
Hier is a small example with the two settings( lineair vs cubic-bezier)

Ahh interesting, it is because of the bezier, but you are kinda using it wrong.

You are kinda supposed to use values between 0 and 1. you are use -1 and 2

This causes you to have weird colors when passing to the middle, where the RGB colors get switched around.


If you wanted a flashier style you should have used this
cubic-bezier(1,0,0,1)


6 Likes

Thanks everybody for your input. My problems for now are solved.

Oi! Mark the post which provided the solution. That way it appears under your question at the top of the page!