# Animated text style changes to unexpected color **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [October 30, 2024, 1:56pm UTC](https://forum.inductiveautomation.com/t/animated-text-style-changes-to-unexpected-color/97954 "2024-10-30T13:56:05Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![Henk](https://avatars.discourse-cdn.com/v4/letter/h/b5ac83/32.png) [@Henk](https://forum.inductiveautomation.com/u/Henk)\ **Post date:** [October 30, 2024, 1:56pm UTC](https://forum.inductiveautomation.com/t/animated-text-style-changes-to-unexpected-color/97954/1 "2024-10-30T13:56:05Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/f/2f0fd15acf20fbfb8f975bf17182c66060cafe18.png) 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? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 30, 2024, 2:57pm UTC](https://forum.inductiveautomation.com/t/animated-text-style-changes-to-unexpected-color/97954/2 "2024-10-30T14:57:11Z")
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? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [October 30, 2024, 3:43pm UTC](https://forum.inductiveautomation.com/t/animated-text-style-changes-to-unexpected-color/97954/3 "2024-10-30T15:43:17Z")
> [@Henk](#): > > Is it possible to make a flashing text style without 'smoothing' like a digital animation? > [@Internal flash bit](https://forum.inductiveautomation.com/t/internal-flash-bit/28393/4): > > It’s a tiny bit convoluted, but you can just use a style class for this, too: 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… ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [October 30, 2024, 3:55pm UTC](https://forum.inductiveautomation.com/t/animated-text-style-changes-to-unexpected-color/97954/4 "2024-10-30T15:55:03Z")
It's fairly easy when using the stylesheet, use `steps()`: ```python animation-timing-function: steps(2); ``` or maybe ```python animation-timing-function: steps(2,end) ``` ---
**Author:** ![Henk](https://avatars.discourse-cdn.com/v4/letter/h/b5ac83/32.png) [@Henk](https://forum.inductiveautomation.com/u/Henk)\ **Post date:** [October 31, 2024, 8:27am UTC](https://forum.inductiveautomation.com/t/animated-text-style-changes-to-unexpected-color/97954/5 "2024-10-31T08:27:52Z")
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. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 31, 2024, 9:50am UTC](https://forum.inductiveautomation.com/t/animated-text-style-changes-to-unexpected-color/97954/6 "2024-10-31T09:50:07Z")
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 🙂 ---
**Author:** ![Henk](https://avatars.discourse-cdn.com/v4/letter/h/b5ac83/32.png) [@Henk](https://forum.inductiveautomation.com/u/Henk)\ **Post date:** [October 31, 2024, 11:22am UTC](https://forum.inductiveautomation.com/t/animated-text-style-changes-to-unexpected-color/97954/7 "2024-10-31T11:22:12Z")
[AnimatedColorStyle.zip](https://forum.inductiveautomation.com/uploads/short-url/ewhtBZRF2HlM8mEWR0T5aFvXn70.zip) (6.4 KB) Hier is a small example with the two settings( lineair vs cubic-bezier) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 31, 2024, 12:16pm UTC](https://forum.inductiveautomation.com/t/animated-text-style-changes-to-unexpected-color/97954/8 "2024-10-31T12:16:15Z")
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. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/d/3dc987836ca41f1af46a73ce8f7e4e209d3044c9.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/2/0261cf07f0ad9a8acb1da9d93b333368dd0392f8.png) If you wanted a flashier style you should have used this `cubic-bezier(1,0,0,1)` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/2/f297dbc125db270f6ca40454bd57c86e697a4cc4.png) ---
**Author:** ![Henk](https://avatars.discourse-cdn.com/v4/letter/h/b5ac83/32.png) [@Henk](https://forum.inductiveautomation.com/u/Henk)\ **Post date:** [November 1, 2024, 6:38am UTC](https://forum.inductiveautomation.com/t/animated-text-style-changes-to-unexpected-color/97954/9 "2024-11-01T06:38:41Z")
Thanks everybody for your input. My problems for now are solved. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [November 1, 2024, 9:04am UTC](https://forum.inductiveautomation.com/t/animated-text-style-changes-to-unexpected-color/97954/10 "2024-11-01T09:04:48Z")
Oi! Mark the post which provided the solution. That way it appears under your question at the top of the page!