# Style Class for blinking one color to the next with no in between color

**URL:** <https://forum.inductiveautomation.com/t/style-class-for-blinking-one-color-to-the-next-with-no-in-between-color/59134>\
**Category:** Ignition\
**Created:** [May 2, 2022, 7:57pm UTC](https://forum.inductiveautomation.com/t/style-class-for-blinking-one-color-to-the-next-with-no-in-between-color/59134 "2022-05-02T19:57:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bronzebeard62](https://avatars.discourse-cdn.com/v4/letter/b/838e76/32.png) [@Bronzebeard62](https://forum.inductiveautomation.com/u/Bronzebeard62)\
**Post date:** [May 2, 2022, 7:57pm UTC](https://forum.inductiveautomation.com/t/style-class-for-blinking-one-color-to-the-next-with-no-in-between-color/59134/1 "2022-05-02T19:57:06Z")

</div>

I’m trying to blink a background color from red to gray using style classes with a 0.5 second blink interval, however I do not want it to fade from one color to the next, it should either be red or gray, no in between. I have played around with the settings but can’t find a way to do this, does anyone have a solution?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/6/46b07565b4fa281de6ee5ba19e36c6cf98d10111.png)

---

<div class="post-metadata">

**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:** [May 2, 2022, 8:33pm UTC](https://forum.inductiveautomation.com/t/style-class-for-blinking-one-color-to-the-next-with-no-in-between-color/59134/2 "2022-05-02T20:33:17Z")

</div>

Consider adding a third stop at 50% with your “blink” color set.  
Then change the timing to `step-end` or `step-start`, e.x. in style class below:

```auto
{
  "base": {
    "animation": {
      "duration": "0.5s",
      "timingFunction": "step-start",
      "fillMode": "none",
      "keyframes": {
        "0%": {
          "borderColor": "#000000"
        },
        "50%": {
          "borderColor": "#FF0000"
        },
        "100%": {
          "borderColor": "#000000"
        }
      }
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Bronzebeard62](https://avatars.discourse-cdn.com/v4/letter/b/838e76/32.png) [@Bronzebeard62](https://forum.inductiveautomation.com/u/Bronzebeard62)\
**Post date:** [May 2, 2022, 8:49pm UTC](https://forum.inductiveautomation.com/t/style-class-for-blinking-one-color-to-the-next-with-no-in-between-color/59134/3 "2022-05-02T20:49:17Z")

</div>

Thanks Paul,

That works exactly as I’d hoped for.

---

<div class="post-metadata">

**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:** [May 2, 2022, 8:55pm UTC](https://forum.inductiveautomation.com/t/style-class-for-blinking-one-color-to-the-next-with-no-in-between-color/59134/4 "2022-05-02T20:55:28Z")

</div>

Alternatively use the cubic-bezier setting. Here it’s `cubic-bezier(1, 0, 0, 1)`.

![Blink cubic-bezier](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/1/91369cfa5a19eff9bf76c60d1452e3cea0625370.gif)

There is actually a fade on the transition but you can study the way CSS cubic-bezier works and modify this to suit.