Animated text style changes to unexpected color

[Henk]

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?

[victordcq]

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

@Henk

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

got an gif of this?

[PGriffith]

@Henk

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

Internal flash bit

It’s a tiny bit convoluted, but you can just use a style class for this, too: [image] Set the duration appropriately, then add a stop at 49% with the same color as your 0% state. Then add a stop at 50% (and 100%) with the alternate color. The animation will take 1s to transition through all your steps - so half the time, it will be trying to transition from step 0 to step 49 - but since they’re the same, nothing will happen. Then, after 50% of 1s has elapsed, it switches to the 50% style (a…

[jlandwerlen]

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

animation-timing-function: steps(2);

or maybe

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

[Henk]

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.

[victordcq]

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

[Henk]

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

[victordcq]

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)

[Henk]

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

[Transistor]

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