# Style for animated border flashes with every page reload or navigation back

**URL:** <https://forum.inductiveautomation.com/t/style-for-animated-border-flashes-with-every-page-reload-or-navigation-back/91987>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [June 18, 2024, 2:27am UTC](https://forum.inductiveautomation.com/t/style-for-animated-border-flashes-with-every-page-reload-or-navigation-back/91987 "2024-06-18T02:27:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![SHuidrom](https://avatars.discourse-cdn.com/v4/letter/s/3be4f8/32.png) [@SHuidrom](https://forum.inductiveautomation.com/u/SHuidrom)\
**Post date:** [June 18, 2024, 2:27am UTC](https://forum.inductiveautomation.com/t/style-for-animated-border-flashes-with-every-page-reload-or-navigation-back/91987/1 "2024-06-18T02:27:36Z")

</div>

I have created a perspective view template with a shape, and I want to dynamically change the border's flashing behavior based on a Boolean signal. When the signal is true, the border should flash in red continuously. Conversely, when the signal is false, it should flash in green for 10 seconds.

To achieve this, I've implemented two animated styles: one for the true state (red flashing) and one for the false state (green flashing for 10 seconds). Initially, the implementation works well during the browser session when the signal is true because it continues to flash until the state changes to false.

However, the issue arises when the signal is false. In this case, the border flashes green for the intended 10 seconds upon initial load, but upon refreshing the page or navigating back to it, the border starts flashing green again for another 10 seconds if the Boolean signal remains false. This repetitive flashing upon page reload or navigation back is not ideal. Is there any way to fix this issue?

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [June 18, 2024, 2:35am UTC](https://forum.inductiveautomation.com/t/style-for-animated-border-flashes-with-every-page-reload-or-navigation-back/91987/2 "2024-06-18T02:35:38Z")

</div>

Maybe add animation-iteration-count: 1

---

<div class="post-metadata">

**Author:** ![SHuidrom](https://avatars.discourse-cdn.com/v4/letter/s/3be4f8/32.png) [@SHuidrom](https://forum.inductiveautomation.com/u/SHuidrom)\
**Post date:** [June 18, 2024, 9:14am UTC](https://forum.inductiveautomation.com/t/style-for-animated-border-flashes-with-every-page-reload-or-navigation-back/91987/3 "2024-06-18T09:14:43Z")

</div>

Hi, thanks for your reply, yes i am actually using iterations 5 (as shown below), which actually pulses the border colour. However this does not resolve the issue.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/9/59ca3ad6a9c26c2708875ad7dc83043696646fd0.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 18, 2024, 10:46am UTC](https://forum.inductiveautomation.com/t/style-for-animated-border-flashes-with-every-page-reload-or-navigation-back/91987/4 "2024-06-18T10:46:06Z")

</div>

Once a style is applied, perspective will remeber it, but the browser will not, so on reload it will be retrigger.  
Its impossible to stop with css, you can only remove the style after 10 seconds through some script