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

Ignition
1

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
image984×741 40.1 KB

2

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:

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

Thanks Paul,

That works exactly as I’d hoped for.

4

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

Blink cubic-bezier

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

1 Like