how to make style blinking via value?

[ozone]

I learned form the style via value example and modified for my data point. i am trying to use this to indicate status for good, warn, alarm, fault and isolate. The data point value will be 0, 1, 2, 3 and 4. Quite happy as it does change color when value changes. Below is the code I used. But the color will be all steady. I want to have steady green color only when "good" , but when alarms I wish to make it blink. Could you help what I need to code to make it blink when alarms? Thanks.

<style>
    .default {
        background-color: black;
        color: white;
        position: absolute; left:100px; top: 200px;
        height: 30px;
        width:30px;
    }
    .good {
        background-color: green;
    }
    .warn {
        background-color: orange;
    }
    .alarm {
        background-color: red;
    }
    .fault {
        background-color: brown;
    }
    .isolated {
        background-color: lightgrey;
    }
</style>

<ma-get-point-value point-xid="DP_1ff7e5b2-2d09-4134-aaf8-305005db3483" point="myPoint"></ma-get-point-value>
<div class="default" ng-class="{'good': myPoint.value === 0, 'warn': myPoint.value === 1, 'alarm': myPoint.value === 2, 'fault': myPoint.value === 3, 'isolated': myPoint.value === 4}">
    <ma-point-value point="myPoint"></ma-point-value>
</div>

[CraigWeb]

Hi @ozone

using CSS animations will be you best way I believe. Here are 2 links showing you how to do it.
https://css-tricks.com/almanac/properties/a/animation/
https://bytutorial.com/blogs/css3/how-to-create-blinking-background-color-and-text-using-css3-animation

[Jared Wiltshire]

@ozone There's actually a CSS class built into Mango which will make this really easy.
Just add ma-throb-opacity to your ng-class expression.

ng-class="{'good': myPoint.value === 0, 'warn': myPoint.value === 1, 'alarm': myPoint.value === 2, 'fault': myPoint.value === 3, 'isolated': myPoint.value === 4, 'ma-throb-opacity': myPoint.value > 0 }"

If you want to see how it works, or modify it a bit, the CSS is supplied in this Mango example -
/ui/examples/single-value-displays/led-indicator

[ozone]

@jared-wiltshire

Thank you so much for the help. . I finally got it working using code you suggested, studied the example and modified to what I wanted. Works really well.